A simple React color picker component

by React

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

Prop Type Details
className string The class name to put on the container div
color string The initial/current selected color (hex value, e.g. #ff00ff)
showSwatch bool Whether the selected color swatch should be displayed below the picker
showHex bool Whether the hex value input should be displayed below the picker
onChange func The 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