@uiw/react-color
Advanced tools
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';
function Demo() {
const [hex, setHex] = useState("#fff");
return (
<Sketch
style={{ 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(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;
}
You can find the react-color documentation on the website.
Base Components
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
As always, thanks to our amazing contributors!
Made with contributors.
Licensed under the MIT License.
FAQs
Color Picker component for React.
The npm package @uiw/react-color receives a total of 19,209 weekly downloads. As such, @uiw/react-color popularity was classified as popular.
We found that @uiw/react-color demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.