2.3.0 • Published 6 months ago

vitest-react-color v2.3.0

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

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);
      }}
    />
  );
}

Support dark/night Theme

[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.

Packages

PackageBundle size(gzip)DownloadsVersion / unpkg
@uiw/react-colornpm bundle size npm bundle sizenpm downloadsnpm version Open in unpkg
@uiw/react-color-sketchbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-sliderbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-compactbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-materialbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-colorfulbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-wheelbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-circlebundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-blockbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-chromebundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-githubbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg

Base Components

PackageBundle size(gzip)DownloadsVersion / unpkg
@uiw/react-color-saturationbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-huebundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-alphabundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-swatchbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-shade-sliderbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-editable-inputbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-editable-input-rgbabundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-editable-input-hslabundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-drag-event-interactivebundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/color-convertbundle size bundle size(gzip)npm downloadsnpm version Open in unpkg
@uiw/react-color-namebundle size bundle size(gzip)npm downloadsnpm version Open in unpkg

Development

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

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.