- Notifications
You must be signed in to change notification settings - Fork109
🎨 Is a tiny color picker widget component for React apps.
License
NotificationsYou must be signed in to change notification settings
uiwjs/react-color
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
react-color is a tiny color picker widget component for React apps. These components can be installed and used separately.
npm i @uiw/react-color
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';functionDemo(){const[hex,setHex]=useState("#fff");return(<Sketchstyle={{marginLeft:20}}color={hex}onChange={(color)=>{setHex(color.hex);}}/>);}
[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(000/10%)01px!important;}[data-color-mode*='dark'] .w-color-editable-input {--editable-input-label-color:#757575!important;--editable-input-box-shadow:#6161610px0px0px1px inset!important;--editable-input-color:#bbb!important;}[data-color-mode*='dark'] .w-color-github {--github-border:1px solidrgba(0,0,0,0.2)!important;--github-background-color:#323232!important;--github-box-shadow:rgb(000/15%)0px3px12px!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(000/37%)0px1px4px0px!important;}
You can find the react-color documentationon the website.
npm install# Installation dependenciesnpm 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 filenpm run watch# Monitor the compiled package `@uiw/react-block`
npm run start# development mode, listen to compile preview website instanceAs always, thanks to our amazing contributors!
Made withcontributors.
Licensed under the MIT License.
About
🎨 Is a tiny color picker widget component for React apps.
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published