RxCSS

by davidkpiano

davidkpiano / RxCSS
418 Stars 20 Forks Last release: Not found MIT License 66 Commits 12 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.