huycuongdao / react-color-picker

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

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
onInteractionStart	func	The callback function to be called when interaction starts with one of the value selectors
onInteractionEnd	func	The callback function to be called when interaction ends with one of the value selectors

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 [isInteracting, setIsInteracting] = useState(false);

  const onColorChange = (updatedColor) => {
    setColor(updatedColor);
  };

  const onInteractionStart = () => {
    setIsInteracting(true);
  };

  const onInteractionEnd = () => {
    setIsInteracting(false);
  };

  return (
    <div className={styles.app}>
      <h1>
        Selected color:
        {color}
      </h1>
      <p>
        Is interacting?
        &nbsp;
        {isInteracting ? 'Yes' : 'No'}
      </p>
      <div className={styles.color_picker}>
        <ReactColorPicker
          color={color}
          onChange={onColorChange}
          onInteractionStart={onInteractionStart}
          onInteractionEnd={onInteractionEnd}
        />
      </div>
    </div>
  );
};

export default App;