react-rainbow-text

Rainbow Text for React

Generates rainbow-colored text in React.

Install

• npm install react-rainbow-text --save or
• yarn add react-rainbow-text

Use

import RainbowText from 'react-rainbow-text';
 
<RainbowText lightness={0.5} saturation={1}>
  This is an example sentence that is the color of the rainbow.
</RainbowText>

Props

• component

  A custom component used for rendering each character.

  <Component children={THE_CHARACTER} color={THE_COLOR} />

• lightness

  A number from 0 to 1 to represent how dark or light the text is. Default: 0.5

  0 is black. 1 is white. 0.5 is full color.

  Example of 0.25 Lightness:

  

  Example of 0.75 Lightness:

  

• opacity

  A number from 0 to 1 to represent the opacity of the text. Default: 1

• saturation

  The saturation of the colors. Default: 1

  0 is grayscale. 1 is full color.

  Example of 0.5 Saturation:

  

  Example of 0.25 Saturation: