https://github.com/charlesstover/react-rainbow-text

Generates rainbow-colored text in React.
https://github.com/charlesstover/react-rainbow-text

babel babeljs enzyme es6 javascript jest js mocha npm npm-module npm-package npmjs react react-component reactjs travis travis-ci travisci webpack

Last synced: about 2 months ago
JSON representation

Generates rainbow-colored text in React.

• Host: GitHub
• URL: https://github.com/charlesstover/react-rainbow-text
• Owner: CharlesStover
• License: mit
• Archived: true
• Created: 2018-08-11T16:14:34.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-03-24T04:19:38.000Z (over 2 years ago)
• Last Synced: 2024-05-10T18:58:10.894Z (6 months ago)
• Topics: babel, babeljs, enzyme, es6, javascript, jest, js, mocha, npm, npm-module, npm-package, npmjs, react, react-component, reactjs, travis, travis-ci, travisci, webpack
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-rainbow-text
• Size: 970 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Rainbow Text for React [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Beautifully%20rainbowify%20your%20text%20with%20the%20%20React%20component.%20pic.twitter.com/moyzdOUjdg&url=https://github.com/CharlesStover/react-rainbow-text&via=CharlesStover&hashtags=react,reactjs,javascript,webdev,webdeveloper,webdevelopment)

Generates rainbow-colored text in React.

[![version](https://img.shields.io/npm/v/react-rainbow-text.svg)](https://www.npmjs.com/package/react-rainbow-text)

[![minified size](https://img.shields.io/bundlephobia/min/react-rainbow-text.svg)](https://www.npmjs.com/package/react-rainbow-text)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/react-rainbow-text.svg)](https://www.npmjs.com/package/react-rainbow-text)

[![downloads](https://img.shields.io/npm/dt/react-rainbow-text.svg)](https://www.npmjs.com/package/react-rainbow-text)

[![build](https://travis-ci.com/CharlesStover/react-rainbow-text.svg)](https://travis-ci.com/CharlesStover/react-rainbow-text/)

[![animated demo](https://user-images.githubusercontent.com/343837/43996739-f59a8678-9d8e-11e8-80c3-8ebc115b144f.gif)](https://charlesstover.github.io/rainbow-text/)

## Install

* `npm install react-rainbow-text --save` or

* `yarn add react-rainbow-text`

## Use

```JS

import RainbowText from 'react-rainbow-text';

  This is an example sentence that is the color of the rainbow.

```

[![screenshot](https://user-images.githubusercontent.com/343837/43996746-290d6ec6-9d8f-11e8-83ef-ba1edbaad6d2.png)](https://charlesstover.github.io/rainbow-text/)

## Props

* component

  A custom component used for rendering each character.

  ``

* 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:**

  [![image](https://user-images.githubusercontent.com/343837/44053946-ca2c27c0-9f06-11e8-820d-47d82f51ed0d.png)](https://charlesstover.github.io/rainbow-text/)

  

  **Example of 0.75 Lightness:**

  [![image](https://user-images.githubusercontent.com/343837/44053965-d983bc1a-9f06-11e8-9d09-2f8693a849e5.png)](https://charlesstover.github.io/rainbow-text/)

* 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:**

  

  [![image](https://user-images.githubusercontent.com/343837/44053997-fc2e5c84-9f06-11e8-9c8b-286fc106881c.png)](https://charlesstover.github.io/rainbow-text/)

  

  **Example of 0.25 Saturation:**

  

  [![image](https://user-images.githubusercontent.com/343837/44054021-0d4b446e-9f07-11e8-8b2e-c546199f395a.png)](https://charlesstover.github.io/rainbow-text/)