# dynamic-styles-service

> 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

Latest version **1.0.2** (published 2020-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install dynamic-styles-service
pnpm add dynamic-styles-service
yarn add dynamic-styles-service
bun add dynamic-styles-service
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-11-02 |
| First published | 2020-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | ofigelov |

## Links

- npm: https://www.npmjs.com/package/dynamic-styles-service
- Repository: https://github.com/Ofigelov/dynamic-styles-service
- Issues: https://github.com/Ofigelov/dynamic-styles-service/issues
- npm.io page: https://npm.io/package/dynamic-styles-service

## Recent versions

- 1.0.2 (latest) — 2020-11-02
- 1.0.1 — 2020-10-31

## 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](https://docs.npmjs.com/about-npm/) for installation.

```
$ npm install dynamic-styles-service
```

## Usage

```js

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*<br>
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*<br>
Type: `string`

CSS selector which will append to your rule.

#### css

CSS rules for setting your rule.

*Required*<br>
Type: `string`

### dynamicStylesService.remove(id);

#### id

*Required*<br>
Type: `string`


## License
[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/dynamic-styles-service · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._