# rainbow-elements
> Simple library that paints HTML elements in rainbow colors
Latest version **0.1.10** (published 2021-03-29) · MIT license · 0 weekly downloads
## Install
```sh
npm install rainbow-elements
pnpm add rainbow-elements
yarn add rainbow-elements
bun add rainbow-elements
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.10 |
| Published | 2021-03-29 |
| First published | 2021-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Lim Haksu |
| Maintainers | neroren |
| Keywords | color, rainbow, paint |
## Links
- npm: https://www.npmjs.com/package/rainbow-elements
- Repository: https://github.com/LimHaksu/rainbow-elements
- Issues: https://github.com/Limhaksu/rainbow-elements/issues
- npm.io page: https://npm.io/package/rainbow-elements
## Alternatives
- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads
## Recent versions
- 0.1.10 (latest) — 2021-03-29
- 0.1.9 — 2021-03-27
- 0.1.8 — 2021-03-27
- 0.1.7 — 2021-03-26
- 0.1.6 — 2021-03-25
- 0.1.5 — 2021-03-25
- 0.1.4 — 2021-03-25
- 0.1.3 — 2021-03-25
- 0.1.2 — 2021-03-25
- 0.1.1 — 2021-03-24
- 0.1.0 — 2021-03-24
## README
# Rainbow Elements
Simple library that paints HTML elements in rainbow colors
## Install
```shell
npm install rainbow-elements
```
```shell
yarn add rainbow-elements
```
## Usage
This library paints the children of the dom with rainbow colors, so wrapper dom is needed.
### basic
Add `class="rainbow-elements"` attribute to the wrapper DOM
```html
```
Import `rainbow-elements` and execute `run()` method
```js
import { re } from "rainbow-elements";
re.run();
```
Then, the div elements inside the wrapper div colored rainbow.
#### UMD ( CDN )
```html
```
```js
const { re } = window.RainbowElements;
re.run();
```
## Methods
| method | parameter | description |
| ------- | --------- | --------------------------------------------------------------------- |
| paint() | `none` | paint rainbow colors the doms in current page |
| clear() | `none` | erase rainbow colors the doms in current page |
| run() | `none` | execute paint() and subscribe paint() method to the mutation observer |
| stop() | `none` | execute clear() and unsubscribe paint() method |
If you use this library in SPA, It is enough to call the run() or stop() method once in root file. Elements in all pages are automatically painted in rainbow colors.
run() and stop() methods use the [mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver). you need to check out the [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#browser_compatibility).
## Attributes
This library changes [hsla](https://www.w3.org/wiki/CSS/Properties/color/HSLA) values of the elements.
**※ re-type "background" and "svg" are deprecated.
They are replaced with "backgroundColor", "fill" and "stroke".**
| attribute | value or range | default value | type | description |
| ------------------ | -------------------------------------------------------------- | ------------- | ------ | -------------------------------------------------------------------------------------------------- |
| class | "rainbow-elements" | `none` | string | The class of the wrapper dom should be named "rainbow-elements" for the library to detect the dom. |
| data-re-type | "color"\|
"backgroundColor"\|
"fill"\|
"stroke" | "color" | string | (optional)
[`re-type`] changes the element.style[`re-type`] |
| data-re-saturation | "0" ~ "1" (float) | "1" | string | (optional)
"0" means "0%" of the saturation and
"1" means "100%" of that. |
| data-re-lightness | "0" ~ "1" (float) | "0.5" | string | (optional)
"0" means "0%" of the lightness and
"1" means "100%" of that. |
| data-re-alpha | "0" ~ "1" (float) | "1" | string | (optional) It is just alpha value |
## Examples
### with React
[link](https://codesandbox.io/s/rainbow-elements-with-react-example-1lb2n?file=/package.json)
### with D3.js
[Bar chart](https://codesandbox.io/s/compassionate-cartwright-zybb0?file=/src/index.js)
[Line chart](https://codesandbox.io/s/rainbow-elements-with-d3-line-chart-example2-2ssu0?file=/src/index.js)
[Multi-line chart](https://codesandbox.io/s/rainbow-elements-d3-line-chart-example-q9owt?file=/src/index.js)
---
_Source: https://npm.io/package/rainbow-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._