davidkpiano / Rxcss
Licence: mit
Stars: ✭ 416
Programming Languages
javascript
184084 projects - #8 most used programming language
RxCSS
RxCSS is a very small library for manipulating CSS Custom Properties (aka CSS Variables) with RxJS Observables.
More Info
- 📖 Read the slides: http://slides.com/davidkhourshid/reactanim#/
- 🎥 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 <script>
tag:
<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.min.js"></script>
<script src="https://unpkg.com/[email protected]/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 thetarget
-
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
.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].