https://github.com/davidkpiano/RxCSS

https://github.com/davidkpiano/RxCSS

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/davidkpiano/RxCSS
• Owner: davidkpiano
• License: mit
• Created: 2016-04-04T19:04:31.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-04T10:09:46.000Z (over 7 years ago)
• Last Synced: 2024-06-24T18:56:15.616Z (3 months ago)
• Language: JavaScript
• Size: 47.9 KB
• Stars: 416
• Watchers: 13
• Forks: 20
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - RxCSS

README

        
# RxCSS

RxCSS is a _very_ small library for manipulating [CSS Custom Properties](https://www.w3.org/TR/css-variables/) (aka CSS Variables) with [RxJS Observables](http://reactivex.io/rxjs/).

**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](https://github.com/ReactiveX/rxjs) is installed and globally available.

## Installation

You can either use RxCSS in an existing project:

```bash

npm install rxcss@latest --save

```

Or you can include it directly in a `` tag:

```html

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

```

## Usage

```js

const mouse$ = Rx.Observable

  .fromEvent(document, 'mousemove')

  .map(({ clientX, clientY }) => ({

    x: clientX,

    y: clientY

  }));

const style$ = RxCSS({

  mouse: mouse$,

});

// Optional

style$.subscribe(...);

```

```css

: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`.