rxcss

RxJS and CSS

Usage no npm install needed!

<script type="module">
  import rxcss from 'https://cdn.skypack.dev/rxcss';
</script>

README

RxCSS

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

More Info

Requirements

Make sure RxJS is installed and globally available.

Installation

You can either use RxCSS in an existing project:

npm install rxcss@latest --save

Or you can include it directly in a <script> tag:

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.min.js"></script>
<script src="https://unpkg.com/rxcss@latest/dist/rxcss.min.js"></script>

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.