@vtaits/react-color-picker
v1.0.2
Published
React Color Picker
Downloads
15,636
Maintainers
Readme
React Color Picker
This is a resurrection of package react-color-picker.
A carefully crafted color picker for React.
No images have been used in the making of this color picker :)
Examples
Install
npm
$ npm install @vtaits/react-color-picker
yarn
$ yarn add @vtaits/react-color-picker
Please don't forget to include the styles!!! - index.css
import { useState } from 'react';
import { ColorPicker } from '@vtaits/react-color-picker';
import '@vtaits/react-color-picker/dist/index.css';
function App() {
const [color, setColor] = useState('red');
const onDrag = (color) => {
setColor(color);
};
return (
<div>
<ColorPicker value={color} onDrag={onDrag} />
<div style={{
background: color,
width: 100,
height: 50,
color: 'white'
}}>
{color}
</div>
</div>
);
}
HueSpectrum
You can use only the hue spectrum if that is what you need.
import { HueSpectrum } from '@vtaits/react-color-picker';
<HueSpectrum value={color} width={100}/>
SaturationSpectrum
You can use only the saturation spectrum if that is what you need.
import { SaturationSpectrum } from '@vtaits/react-color-picker';
<SaturationSpectrum value={color} height={400}/>
Properties
It's best if you specify a fixed size for the color picker.
Available options:
- saturationWidth
- saturationHeight
- hueWidth
- hueHeight (defaults to saturationHeight)
<ColorPicker value={color} saturationWidth={400} saturationHeight={500} />
<ColorPicker value={color} saturationWidth={400} saturationHeight={500} hueWidth={100}/>
You can specify any other properties on the ColorPicker
, including className
, style
, etc
The ColorPicker
will always have a css class color-picker
The ColorPicker, the HueSpectrum and the SaturationSpectrum all accept onDrag
and onChange
callbacks.
onDrag(colorString)
Called during the dragging operation.
onChange(colorString)
Called after mouse up - when the color has been selected