@uiw/react-color
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.12 • Public • Published
    react-color is a tiny color picker widget component for React apps. These components can be installed and used separately.

    Getting Started

    npm i @uiw/react-color

    Open in CodeSandbox Open in Github gh-pages

    import { Slider, Sketch, Material, Colorful, Compact, Circle, Wheel, Block, Github, Chrome } from '@uiw/react-color';
    import { Alpha, Hue, ShadeSlider, Saturation, Interactive, hsvaToHslaString } from '@uiw/react-color';
    import { EditableInput, EditableInputRGBA, EditableInputHSLA } 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 Bundle size(gzip) Version / unpkg
    @uiw/react-color npm bundle size npm bundle size npm version Open in unpkg
    @uiw/react-color-sketch bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-slider bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-compact bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-material bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-colorful bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-wheel bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-circle bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-block bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-chrome bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-github bundle size bundle size(gzip) npm version Open in unpkg

    Base Components

    Package Bundle size(gzip) Version / unpkg
    @uiw/react-color-saturation bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-hue bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-alpha bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-swatch bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-shade-slider bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-editable-input bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-editable-input-rgba bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-editable-input-hsla bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-drag-event-interactive bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/color-convert bundle size bundle size(gzip) npm version Open in unpkg
    @uiw/react-color-name bundle size bundle size(gzip) npm version Open in unpkg

    Development

    npm install       # Installation dependencies
    npm run build     # Compile all package
    cd packages/color-block
    # listen to the component compile and output the .js file
    # listen for compilation output type .d.ts file
    npm run watch # Monitor the compiled package `@uiw/react-block`
    npm run start     # development mode, listen to compile preview website instance

    License

    Licensed under the MIT License.

    Install

    npm i @uiw/react-color

    DownloadsWeekly Downloads

    630

    Version

    1.0.12

    License

    MIT

    Unpacked Size

    176 kB

    Total Files

    12

    Last publish

    Collaborators

    • wcjiang