React Color

Color Picker component for React.

Getting Started

npm i @uiw/react-color

Open in CodeSandbox

import { Sketch } from '@uiw/react-color';

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

Packages

@uiw/react-color

npm bundle size npm version Open in unpkg Open in CodeSandbox

@uiw/react-color-saturation

npm bundle size npm version Open in unpkg

image

@uiw/react-color-hue

npm bundle size npm version Open in unpkg

image

@uiw/react-color-alpha

npm bundle size npm version Open in unpkg

image

@uiw/react-color-shade-slider

npm bundle size npm version Open in unpkg

image

@uiw/react-color-slider

npm bundle size npm version Open in unpkg

@uiw/react-color-sketch

npm bundle size npm version Open in unpkg

image

@uiw/color-convert

npm bundle size npm version Open in unpkg

@uiw/react-drag-event-interactive

npm bundle size npm version Open in unpkg