dynamic-styles-service
v1.0.2
Published
In some cases you need to set dynamically calculated styles for different elements, and for realise it, you have to inline them into your html element like that `document.body.style = '--viewportHeight: ' + window.innerHeight ' + 'px;'` But in during of
Downloads
2
Readme
Motivation
In some cases you need to set dynamically calculated styles for different elements, and for realise it, you have to inline them into your html element like that document.body.style = '--viewportHeight: ' + window.innerHeight ' + 'px;'
But in during of development anybody can change it one more time and just drop your changes.
In another case you can set dynamically calculated styles in separated DOM style element, but if you have a lot of them, google page speed won't like it. So this is simple singleton way to solve two typical troubles in during of development.
Installation
Use the package manager npm for installation.
$ npm install dynamic-styles-serviceUsage
import { dynamicStylesService } from 'dynamic-styles-service';
dynamicStylesService.setStyles({ id: 'some-id', selector: 'body', css: ` --viewport-height: ${window.innerHeight}px` })
API
dynamicStylesService.setStyles(optionsObject);
id
Required
Type: string
It is uses to identify your style rule, if you provide same id several times, service will apply only the last of them
selector
Required
Type: string
CSS selector which will append to your rule.
css
CSS rules for setting your rule.
Required
Type: string
dynamicStylesService.remove(id);
id
Required
Type: string