@uiw/react-color

Color Picker component for React.

Usage no npm install needed!

<script type="module">
  import uiwReactColor from 'https://cdn.skypack.dev/@uiw/react-color';
</script>

README

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 bootstrap # Install dependencies in sub-packages
npm run hoist     # Install dependencies in sub-packages

npm run build     # Compile package
# listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch:color # Monitor the compiled package `@uiw/react-color`
npm run watch:alpha # Monitor the compiled package `@uiw/react-alpha`

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

License

Licensed under the MIT License.