color

A simple React color picker component

Aug 06, 2020
A simple React color picker component

react-color-picker

A React color picker component.

Install

NPM:

npm install @super-effective/react-color-picker

Yarn:

yarn add @super-effective/react-color-picker

Usage

Import the component:

import ReactColorPicker from '@super-effective/react-color-picker';

Render the component in your code:

<ReactColorPicker color={color} onChange={onColorChange} /

Props

PropTypeDetails
classNamestringThe class name to put on the container div
colorstringThe initial/current selected color (hex value, e.g. #ff00ff)
showSwatchboolWhether the selected color swatch should be displayed below the picker
showHexboolWhether the hex value input should be displayed below the picker
onChangefuncThe callback function to be called when the color value changes

Example

See the included example for reference

import React, { useState } from 'react'; import ReactColorPicker from '@super-effective/react-color-picker'; import styles from './App.module.scss'; const App = () => { const [color, setColor] = useState('#3cd6bf'); const onColorChange = (updatedColor) => { setColor(updatedColor); }; return ( <div className={styles.app}> <h1> Selected color: {color} </h1> <div className={styles.color_picker}> <ReactColorPicker color={color} onChange={onColorChange} /> </div> </div> ); }; export default App;

GitHub

Recommended