@uiw/react-color

react-color is a tiny color picker component for React apps.

Getting Started

npm i @uiw/react-color

import { Alpha, Hue, Slider, Sketch, Compact } from '@uiw/react-color';
import { ShadeSlider, Saturation, Interactive, hsvaToHslaString } from '@uiw/react-color';

function Demo() {
  const [hex, setHex] = useState("#fff");
  return (
    <Sketch
      style={{ marginLeft: 20 }}
      color={hex}
      onChange={(color) => {
        setHex(color.hex);
      }}
    />
  );
}

Packages

Package	Version / unpkg / bundle size
@uiw/react-color
@uiw/react-color-sketch
@uiw/react-color-slider
@uiw/react-color-compact
@uiw/react-color-saturation
@uiw/react-color-hue
@uiw/react-color-alpha
@uiw/react-color-shade-slider
@uiw/color-convert
@uiw/react-drag-event-interactive
@uiw/react-color-editable-input

License

Licensed under the MIT License.