Need help with RxCSS?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

davidkpiano
416 Stars 20 Forks MIT License 66 Commits 2 Opened issues

Services available

!
?

Need anything else?

Contributors list

# 3,624
TypeScr...
React
statech...
visuali...
57 commits
# 5,872
jupyter
React
nteract
apache-...
1 commit
# 55,399
css-tra...
angular...
scrollb...
vanilla...
1 commit

RxCSS

RxCSS is a very small library for manipulating CSS Custom Properties (aka CSS Variables) with RxJS Observables.

More Info

  • :book: Read the slides: http://slides.com/davidkhourshid/reactanim#/
  • :movie_camera: Watch the presentation: https://www.youtube.com/watch?v=lTCukb6Zn3g

Requirements

Make sure RxJS is installed and globally available.

Installation

You can either use RxCSS in an existing project:

npm install [email protected] --save

Or you can include it directly in a

 tag:
html


Usage

const mouse$ = Rx.Observable
  .fromEvent(document, 'mousemove')
  .map(({ clientX, clientY }) => ({
    x: clientX,
    y: clientY
  }));


const style$ = RxCSS({ mouse: mouse$, });

// Optional style$.subscribe(...);

:root {
  --mouse-x: 0;
  --mouse-y: 0;
}

.ball { transform: translateX(calc(var(--mouse-x) * 1px)) translateY(calc(var(--mouse-y) * 1px)); }

API

RxCSS(observableMap[, target])

Sets each key/value pair, where each value is an observable, as a CSS variable on the target.

  • observableMap
    (Object) - an object where each:
    • key
      is the CSS variable name to be set on the
      target
    • value
      is either an Observable stream of values, or a single value to set the CSS variable to.
  • target
    (Element) - the DOM node to set the CSS variables to. Default:
    document.documentElement
    .

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.