@uiw/react-color

<div align="center" markdown="1"> <sup>Special thanks to:</sup> <br> <br> <a href="https://apps.apple.com/app/apple-store/id6757860829?pt=80185800&ct=jay&mt=8"> <img alt="SubList" width="400" src="https://jaywcjlove.github.io/sponsor/SubList.jpg"> </a> <br> <a href="https://apps.apple.com/app/apple-store/id6757860829?pt=80185800&ct=jay&mt=8"> SubList - Bill Reminder & Renewal Alerts </a> <br><br> </div> <hr> <div markdown="1"> <sup>Using <a href="https://wangchujiang.com/#/app" target="_blank">my app</a> is also a way to <a href="https://wangchujiang.com/#/sponsor" target="_blank">support</a> me:</sup> <br> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6766860898" title="Zipora: Zip/RAR/7Z Unarchiver"><img alt="Zipora: Zip/RAR/7Z Unarchiver" height="52" src="https://wangchujiang.com/appicon/zipora.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6758053530" title="Scap: Screenshot & Markup Edit for macOS"><img alt="Scap: Screenshot & Markup Edit" height="52" src="https://wangchujiang.com/appicon/scap.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6757317079" title="Screen Test for macOS"><img alt="Screen Test" height="52" src="https://wangchujiang.com/appicon/screen-test.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" src="https://wangchujiang.com/appicon/deskmark.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="52" src="https://wangchujiang.com/appicon/keyzer.png"></a> <a target="_blank" href="https://github.com/jaywcjlove/vidwall-hub" title="Vidwall Hub for macOS"><img alt="Vidwall Hub" height="52" src="https://wangchujiang.com/appicon/vidwall-hub.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6752624705" title="VidCrop for macOS"><img alt="VidCrop" height="52" src="https://wangchujiang.com/appicon/vidcrop.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6747587746" title="Vidwall for macOS"><img alt="Vidwall" height="52" src="https://wangchujiang.com/appicon/vidwall.png"></a> <a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img alt="Mousio Hint" height="52" src="https://wangchujiang.com/appicon/mousio-hint.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6746747327" title="Mousio for macOS"><img alt="Mousio" height="52" src="https://wangchujiang.com/appicon/mousio.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6745227444" title="Musicer for macOS"><img alt="Musicer" height="52" src="https://wangchujiang.com/appicon/musicer.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6743841447" title="Audioer for macOS"><img alt="Audioer" height="52" src="https://wangchujiang.com/appicon/audioer.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6744690194" title="FileSentinel for macOS"><img alt="FileSentinel" height="52" src="https://wangchujiang.com/appicon/file-sentinel.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6743495172" title="FocusCursor for macOS"><img alt="FocusCursor" height="52" src="https://wangchujiang.com/appicon/focus-cursor.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6742680573" title="Videoer for macOS"><img alt="Videoer" height="52" src="https://wangchujiang.com/appicon/videoer.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6740425504" title="KeyClicker for macOS"><img alt="KeyClicker" height="52" src="https://wangchujiang.com/appicon/key-clicker.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6739052447" title="DayBar for macOS"><img alt="DayBar" height="52" src="https://wangchujiang.com/appicon/daybar.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6739444407" title="Iconed for macOS"><img alt="Iconed" height="52" src="https://wangchujiang.com/appicon/iconed.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6737160756" title="Menuist for macOS"><img alt="Menuist" height="52" src="https://wangchujiang.com/appicon/rightmenu-master.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6723903021" title="Paste Quick for macOS"><img alt="Quick RSS" height="52" src="https://wangchujiang.com/appicon/paste-quick.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6670696072&platform=mac" title="Quick RSS for macOS/iOS"><img alt="Quick RSS" height="52" src="https://wangchujiang.com/appicon/quick-rss.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6670167443" title="Web Serve for macOS"><img alt="Web Serve" height="52" src="https://wangchujiang.com/appicon/web-serve.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6503953628&platform=mac" title="Copybook Generator for macOS/iOS"><img alt="Copybook Generator" height="52" src="https://wangchujiang.com/appicon/copybook-generator.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6471227008&platform=mac" title="DevTutor for macOS/iOS"><img alt="DevTutor for SwiftUI" height="52" src="https://wangchujiang.com/appicon/devtutor.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6479819388&platform=mac" title="RegexMate for macOS/iOS"><img alt="RegexMate" height="52" src="https://wangchujiang.com/appicon/regex-mate.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6479194014&platform=mac" title="Time Passage for macOS/iOS"><img alt="Time Passage" height="52" src="https://wangchujiang.com/appicon/time-passage.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6478772538" title="IconizeFolder for macOS"><img alt="Iconize Folder" height="52" src="https://wangchujiang.com/appicon/iconize-folder.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6478511402&platform=mac" title="Textsound Saver for macOS/iOS"><img alt="Textsound Saver" height="52" src="https://wangchujiang.com/appicon/textsound-saver.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6476924627" title="Create Custom Symbols for macOS"><img alt="Create Custom Symbols" height="52" src="https://wangchujiang.com/appicon/create-custom-symbols.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6476452351" title="DevHub for macOS"><img alt="DevHub" height="52" src="https://wangchujiang.com/appicon/devhub.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6476400184" title="Resume Revise for macOS"><img alt="Resume Revise" height="52" src="https://wangchujiang.com/appicon/resume-revise.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6472593276" title="Palette Genius for macOS"><img alt="Palette Genius" height="52" src="https://wangchujiang.com/appicon/palette-genius.png"></a> <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6470879005" title="Symbol Scribe for macOS"><img alt="Symbol Scribe" height="52" src="https://wangchujiang.com/appicon/symbol-scribe.png"></a> </div> <hr>  <br/><br/><br/> <p align="center"> <a title="React Color" href="https://uiwjs.github.io/react-color/"> <img src="https://github.com/uiwjs/react-color/assets/1680273/da32cf40-46fa-4da8-bd8e-fe6ad2ce3b1f" alt="@uiw/react-color" /> </a> </p> <br/><br/> <h1 align="center">React Color</h1>  <div align="center"> <a href="https://jaywcjlove.github.io/#/sponsor" title="Buy me a coffee"> <img src="https://img.shields.io/badge/Buy_Me_a_Coffee-ffdd00?logo=buy-me-a-coffee&logoColor=black" alt="Buy me a coffee"> </a> <a href="https://x.com/jaywcjlove" title="Follow On X"> <img src="https://img.shields.io/badge/Follow%20on%20X-333333?logo=x&logoColor=white" alt="Follow On X"> </a> <a href="https://github.com/uiwjs/react-color/actions/workflows/ci.yml"> <img alt="Build & Deploy" src="https://github.com/uiwjs/react-color/actions/workflows/ci.yml/badge.svg" /> </a> <a href="https://uiwjs.github.io/react-color/coverage/lcov-report/"> <img alt="Coverage Status" src="https://uiwjs.github.io/react-color/coverage/badges.svg" /> </a> <a href="https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color/file/README.md"> <img alt="Open in unpkg" src="https://img.shields.io/badge/Open%20in-unpkg-blue" /> </a> <a href="https://www.npmjs.com/package/@uiw/react-color"> <img alt="npm version" src="https://img.shields.io/npm/v/@uiw/react-color.svg" /> </a> </div> <div align="center"> <strong>react-color</strong> is a tiny color picker widget component for React apps. These components can be installed and used separately. </div>  <br/><br/> <p align="center"> <a title="React Color" href="https://uiwjs.github.io/react-color/"> <img src="https://user-images.githubusercontent.com/1680273/126048210-964aa087-8641-428e-a4e4-67cdca812159.png" alt="@uiw/react-color" /> </a> </p> <br/><br/>  ## 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, Swatch, 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); }} /> ); } ``` ## 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 | Downloads | Version / unpkg ----- | ---- | ---- [`@uiw/react-color`](https://uiwjs.github.io/react-color/) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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 | Downloads | Version / unpkg ----- | ----- | ---- [`@uiw/react-color-saturation`](https://uiwjs.github.io/react-color/#/saturation) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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) | [![npm downloads](https://badgen.net/npm/dm/@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! <a href="https://github.com/uiwjs/react-color/graphs/contributors"> <img src="https://uiwjs.github.io/react-color/coverage/CONTRIBUTORS.svg" /> </a> Made with [contributors](https://github.com/jaywcjlove/github-action-contributors). ## License Licensed under the MIT License.