Reactive CSS: Super fast dynamic CSS rules.
npm install rxs
Super fast dynamic CSS rules.
Tiny and Dependency-free!
npm install rxs --save
`
Example Demo
Clone this repo, and open up:
* example/index.html (Move your mouse around + resize window)
* example/hero.html (Scroll)
Quick Example
For this example, we want the height of any element with the class of
.fun-height to be exactly 65% of the window's height, in px. It should also update everytime the browser is resized.`html
...
`In our Javascript, we'll define the Reactive CSS rule. We can set/update the rule by using the
.set() method everytime the window is resized.`js
// Add a new CSS rule to the Reactive Stylesheet
var funHeightCSS = rxs('.fun-height');window.addEventListener('resize', function() {
// Everytime the window is resized, update the height property for
// the class
.fun-height to a computed height
funHeightCSS.set({
height: (window.innerHeight * 0.65) + 'px',
});
});
`Alternatively, you can write the above in a slightly shorter way by passing the style properties as a second argument for
rxs():`js
window.addEventListener('resize', function() {
// Everytime the window is resized, update the height property for
// the class .fun-height to a computed height
rxs('.fun-height', {
height: (window.innerHeight * 0.65) + 'px',
});
});
``