react-color

Color Picker Components

react-color provides various color picker components like SketchPicker, which can be easily integrated into a React application to allow users to pick colors.

import { SketchPicker } from 'react-color';

function App() {
  const [color, setColor] = useState('#fff');

  const handleChangeComplete = (color) => {
    setColor(color.hex);
  };

  return (
    <SketchPicker
      color={color}
      onChangeComplete={handleChangeComplete}
    />
  );
}

Customizable Styles

The components provided by react-color can be styled and customized to fit the design of the application. Users can adjust dimensions, colors, and more.

import { PhotoshopPicker } from 'react-color';

function App() {
  const [color, setColor] = useState('#fff');

  const styles = reactCSS({
    'default': {
      picker: {
        width: '300px',
        height: '400px',
      },
    },
  });

  return (
    <div style={ styles.picker }>
      <PhotoshopPicker
        color={color}
        onChangeComplete={(color) => setColor(color.hex)}
      />
    </div>
  );
}

Color Representation

react-color supports different color representations such as HEX, RGB, and HSL. Users can work with the color model that best suits their needs.

import { CompactPicker } from 'react-color';

function App() {
  const [color, setColor] = useState({ r: 255, g: 0, b: 0, a: 1 });

  return (
    <CompactPicker
      color={color}
      onChangeComplete={(color) => setColor(color.rgb)}
    />
  );
}