Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/uiwjs/react-color

🎨 Is a tiny color picker widget component for React apps.
https://github.com/uiwjs/react-color
chrome color color-picker colorful hex material material-color react react-color react-colorpicker react-components rgba rgba-color sketch slider typescript widget
Last synced: about 2 months ago
JSON representation
🎨 Is a tiny color picker widget component for React apps.
Host: GitHub
URL: https://github.com/uiwjs/react-color
Owner: uiwjs
License: mit
Created: 2021-07-02T11:38:47.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2024-07-18T13:48:40.000Z (2 months ago)
Last Synced: 2024-07-18T17:17:41.328Z (2 months ago)
Topics: chrome, color, color-picker, colorful, hex, material, material-color, react, react-color, react-colorpicker, react-components, rgba, rgba-color, sketch, slider, typescript, widget
Language: TypeScript
Homepage: https://uiwjs.github.io/react-color
Size: 67.7 MB
Stars: 244
Watchers: 4
Forks: 85
Open Issues: 14
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project

awesome-react-components - react-color - Is a tiny color picker widget component for React apps. (UI Components / Form Components)
awesome-react - react-color - Is a tiny color picker widget component for React apps. ![](https://img.shields.io/github/stars/uiwjs/react-color.svg?style=social&label=Star) (UI Components / Form Components)
awesome-react-components - react-color - Is a tiny color picker widget component for React apps. (UI Components / Form Components)
fucking-awesome-react-components - react-color - Is a tiny color picker widget component for React apps. (UI Components / Form Components)
README

        







  

    

  







React Color




  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  





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









  

    

  







## Getting Started

```bash

npm i @uiw/react-color

```

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-color-example-rev1n?fontsize=14&hidenavigation=1&theme=dark) [![Open in Github gh-pages](https://img.shields.io/badge/Open%20In-Github%20gh--pages-blue?logo=github)](https://uiwjs.github.io/react-color/)

```jsx

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 (

     {

        setHex(color.hex);

      }}

    />

  );

}

```

## Support dark/night Theme

```css

[data-color-mode*='dark'] .w-color-sketch {

  --sketch-background: #323232 !important;

}

[data-color-mode*='dark'] .w-color-swatch {

  --sketch-swatch-border-top: 1px solid #525252 !important;

}

[data-color-mode*='dark'] .w-color-block {

  --block-background-color: #323232 !important;

  --block-box-shadow: rgb(0 0 0 / 10%) 0 1px !important;

}

[data-color-mode*='dark'] .w-color-editable-input {

  --editable-input-label-color: #757575 !important;

  --editable-input-box-shadow: #616161 0px 0px 0px 1px inset !important;

  --editable-input-color: #bbb !important;

}

[data-color-mode*='dark'] .w-color-github {

  --github-border: 1px solid rgba(0, 0, 0, 0.2) !important;

  --github-background-color: #323232 !important;

  --github-box-shadow: rgb(0 0 0 / 15%) 0px 3px 12px !important;

  --github-arrow-border-color: rgba(0, 0, 0, 0.15) !important;

}

[data-color-mode*='dark'] .w-color-compact {

  --compact-background-color: #323232 !important;

}

[data-color-mode*='dark'] .w-color-material {

  --material-background-color: #323232 !important;

  --material-border-bottom-color: #707070 !important;

}

[data-color-mode*='dark'] .w-color-alpha {

  --alpha-pointer-background-color: #6a6a6a !important;

  --alpha-pointer-box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px !important;

}

```

## Documentation

You can find the react-color documentation [on the website](https://uiwjs.github.io/react-color/).

## Packages

Package | Bundle size(gzip) | Downloads | Version / unpkg

----- | ----- | ----  | ----

[`@uiw/react-color`](https://uiwjs.github.io/react-color/) | [![npm bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-color?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color.svg)](https://www.npmjs.com/package/@uiw/react-color) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color/file/README.md)

[`@uiw/react-color-sketch`](https://uiwjs.github.io/react-color/#/sketch) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-sketch?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-sketch) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-sketch?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-sketch) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-sketch?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-sketch) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-sketch.svg)](https://www.npmjs.com/package/@uiw/react-color-sketch) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-sketch/file/README.md)

[`@uiw/react-color-slider`](https://uiwjs.github.io/react-color/#/slider) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-slider?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-slider) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-slider?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-slider) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-slider?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-slider) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-slider.svg)](https://www.npmjs.com/package/@uiw/react-color-slider) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-slider/file/README.md)

[`@uiw/react-color-compact`](https://uiwjs.github.io/react-color/#/compact) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-compact?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-compact) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-compact?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-compact) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-compact?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-compact) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-compact.svg)](https://www.npmjs.com/package/@uiw/react-color-compact) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-compact/file/README.md)

[`@uiw/react-color-material`](https://uiwjs.github.io/react-color/#/material) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-material?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-material) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-material?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-material) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-material?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-material) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-material.svg)](https://www.npmjs.com/package/@uiw/react-color-material) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-material/file/README.md)

[`@uiw/react-color-colorful`](https://uiwjs.github.io/react-color/#/colorful) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-colorful?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-colorful) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-colorful?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-colorful) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-colorful?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-colorful) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-colorful.svg)](https://www.npmjs.com/package/@uiw/react-color-colorful) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-colorful/file/README.md)

[`@uiw/react-color-wheel`](https://uiwjs.github.io/react-color/#/wheel) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-wheel?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-wheel) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-wheel?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-wheel) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-wheel?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-wheel) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-wheel.svg)](https://www.npmjs.com/package/@uiw/react-color-wheel) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-wheel/file/README.md)

[`@uiw/react-color-circle`](https://uiwjs.github.io/react-color/#/circle) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-circle?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-circle) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-circle?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-circle) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-circle?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-circle) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-circle.svg)](https://www.npmjs.com/package/@uiw/react-color-circle) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-circle/file/README.md)

[`@uiw/react-color-block`](https://uiwjs.github.io/react-color/#/block) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-block?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-block) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-block?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-block) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-block?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-block) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-block.svg)](https://www.npmjs.com/package/@uiw/react-color-block) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-block/file/README.md)

[`@uiw/react-color-chrome`](https://uiwjs.github.io/react-color/#/chrome) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-chrome?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-chrome) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-chrome?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-chrome) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-chrome?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-chrome) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-chrome.svg)](https://www.npmjs.com/package/@uiw/react-color-chrome) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-chrome/file/README.md)

[`@uiw/react-color-github`](https://uiwjs.github.io/react-color/#/github) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-github?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-github) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-github?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-github) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-github?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-github) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-github.svg)](https://www.npmjs.com/package/@uiw/react-color-github) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-github/file/README.md)

#### `Base Components`

Package | Bundle size(gzip) | Downloads | Version / unpkg

----- | ----- | ----- | ----

[`@uiw/react-color-saturation`](https://uiwjs.github.io/react-color/#/saturation) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-saturation?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-saturation) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-saturation?color=green&label=)](https://bundlephobia.com/package/@uiw/react-color-saturation) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-saturation?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-saturation) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-saturation.svg)](https://www.npmjs.com/package/@uiw/react-color-saturation) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-saturation/file/README.md)

[`@uiw/react-color-hue`](https://uiwjs.github.io/react-color/#/hue) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-hue?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-hue) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-hue?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-hue) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-hue?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-hue) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-hue.svg)](https://www.npmjs.com/package/@uiw/react-color-hue) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-hue/file/README.md)

[`@uiw/react-color-alpha`](https://uiwjs.github.io/react-color/#/alpha) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-alpha?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-alpha) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-alpha?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-alpha) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-alpha?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-alpha) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-alpha.svg)](https://www.npmjs.com/package/@uiw/react-color-alpha) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-alpha/file/README.md)

[`@uiw/react-color-swatch`](https://uiwjs.github.io/react-color/#/swatch) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-swatch?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-swatch) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-swatch?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-swatch) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-swatch?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-swatch) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-swatch.svg)](https://www.npmjs.com/package/@uiw/react-color-swatch) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-swatch/file/README.md)

[`@uiw/react-color-shade-slider`](https://uiwjs.github.io/react-color/#/shade-slider) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-shade-slider?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-shade-slider) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-shade-slider?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-shade-slider) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-shade-slider?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-shade-slider) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-shade-slider.svg)](https://www.npmjs.com/package/@uiw/react-color-shade-slider) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-shade-slider/file/README.md)

[`@uiw/react-color-editable-input`](https://uiwjs.github.io/react-color/#/editable-input) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-editable-input?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-editable-input) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-editable-input?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-editable-input) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-editable-input?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-editable-input) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-editable-input.svg)](https://www.npmjs.com/package/@uiw/react-color-editable-input) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-editable-input/file/README.md)

[`@uiw/react-color-editable-input-rgba`](https://uiwjs.github.io/react-color/#/editable-input-rgba) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-editable-input-rgba?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-editable-input-rgba) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-editable-input-rgba?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-editable-input-rgba) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-editable-input-rgba?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-editable-input-rgba) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-editable-input-rgba.svg)](https://www.npmjs.com/package/@uiw/react-color-editable-input-rgba) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-editable-input-rgba/file/README.md)

[`@uiw/react-color-editable-input-hsla`](https://uiwjs.github.io/react-color/#/editable-input-hsla) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-editable-input-hsla?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-editable-input-hsla) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-editable-input-hsla?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-editable-input-hsla) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-editable-input-hsla?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-editable-input-hsla) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-editable-input-hsla.svg)](https://www.npmjs.com/package/@uiw/react-color-editable-input-hsla) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-editable-input-hsla/file/README.md)

[`@uiw/react-drag-event-interactive`](https://uiwjs.github.io/react-color/#/drag-event-interactive) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-drag-event-interactive?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-drag-event-interactive) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-drag-event-interactive?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-drag-event-interactive) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-drag-event-interactive?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-drag-event-interactive) | [![npm version](https://img.shields.io/npm/v/@uiw/react-drag-event-interactive.svg)](https://www.npmjs.com/package/@uiw/react-drag-event-interactive) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-drag-event-interactive/file/README.md)

[`@uiw/color-convert`](https://uiwjs.github.io/react-color/#/convert) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/color-convert?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/color-convert) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/color-convert?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/color-convert) | [![npm downloads](https://badgen.net/npm/dw/@uiw/color-convert?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/color-convert) | [![npm version](https://img.shields.io/npm/v/@uiw/color-convert.svg)](https://www.npmjs.com/package/@uiw/color-convert) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/color-convert/file/README.md)

[`@uiw/react-color-name`](https://uiwjs.github.io/react-color/#/name) | [![bundle size](https://img.shields.io/bundlephobia/min/@uiw/react-color-name?color=3789D6&label=)](https://bundlephobia.com/package/@uiw/react-color-name) [![bundle size(gzip)](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-name?color=6ead0a&label=)](https://bundlephobia.com/package/@uiw/react-color-name) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-color-name?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-name) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-name.svg)](https://www.npmjs.com/package/@uiw/react-color-name) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-name/file/README.md)

## Development

```bash

npm install       # Installation dependencies

npm run build     # Compile all package

```

```bash

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`

```

```bash

npm run start     # development mode, listen to compile preview website instance

```

## Contributors

As always, thanks to our amazing contributors!



  



Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).

## License

Licensed under the MIT License.