Skip to content

Simple library that paints HTML elements in rainbow colors

License

Notifications You must be signed in to change notification settings

LimHaksu/rainbow-elements

Repository files navigation

npm NPM

Rainbow Elements

RainbowElements

Simple library that paints HTML elements in rainbow colors

Install

npm install rainbow-elements
yarn add rainbow-elements

Usage

This library paints the children of the dom with rainbow colors, so wrapper dom is needed.

ES module

Add class="rainbow-elements" attribute to the wrapper DOM

<div class="rainbow-elements" data-re-type="background">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

Import rainbow-elements and execute run() method

import { re } from "rainbow-elements";
re.run();

Then, the div elements inside the wrapper div colored rainbow.

UMD ( CDN )

<body>
    <div class="rainbow-elements" data-re-type="background">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</body>
<script src="https://unpkg.com/rainbow-elements@latest/dist/rainbow-elements.js"></script>
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. you need to check out the browser compatibility.

Attributes

This library changes 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

with D3.js

Bar chart

Line chart

Multi-line chart