0.1.2 • Published 6 years ago
react-rainbow v0.1.2
React-rainbow
A simple React component that switches colors, using render props.
Ever wondered how to switch colors easily from a list of colors, or even randomly? This component is for you!
Demo
A storybook demo is available at tducasse.github.io/react-rainbow.
Installation
Since the component is published on the npm registry, you can just run:
npm i react-rainbowUsage
The component uses render props, this means that it only takes care of the logic, and it's up to you to choose how you will display the result.
Just import it with:
import Rainbow from 'react-rainbow'It takes the following properties:
| Property | Type | Usage |
|---|---|---|
| colors | Optional. An array of strings. Each string must be a valid CSS color. Example: 'red', '#ffffff' | If provided, the component will switch randomly between these colors. Otherwise, it will just generate a new valid color everytime you switch. |
| ordered | Optional. Boolean. Defaults to false. | If true, the component will follow the original array order when switching. |
| initial | Optional. String. Defaults to 'white'. Must be a valid CSS color. | Color that will be active the first time the component is rendered. |
| children | React component | This component will be given 2 props: the current active color, and a callback allowing you to switch the active color. |
Examples
All the examples are available at tducasse.github.io/react-rainbow and in the /stories folder.
const RainbowButton = props => (
<Rainbow {...props}>
{(color, onClick) => {
return (
<div style={{ textAlign: 'center', width: 250 }}>
<div>{color}</div>
<div
style={{
backgroundColor: color,
width: 250,
height: 250,
textAlign: 'center'
}}
/>
<button onClick={onClick}>Click me!</button>
</div>
);
}}
</Rainbow>
);