Package Exports
- @vtaits/react-color-picker
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vtaits/react-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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-pickeryarn
$ yarn add @vtaits/react-color-pickerUsage
You can have either controlled (using value) or uncontrolled (using defaultValue) pickers.
Please don't forget to include the styles!!! - index.css
Example (controlled)
import { render } from 'react-dom';
import React, { useState } from 'react';
import ColorPicker from '@vtaits/react-color-picker';
import '@vtaits/react-color-picker/dist/index.css';
const 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>
);
};
render(<App />, document.getElementById('content'))Example (uncontrolled)
render(
<ColorPicker defaultValue='#452135'/>,
document.getElementById('content')
)
HueSpectrum
You can use only the hue spectrum if that is what you need.
import React from 'react';
import { HueSpectrum } from '@vtaits/react-color-picker';
<HueSpectrum value={color} width={100}/>
<HueSpectrum defaultValue="red" />SaturationSpectrum
You can use only the saturation spectrum if that is what you need.
import React from 'react';
import { SaturationSpectrum } from '@vtaits/react-color-picker';
<SaturationSpectrum value={color} height={400}/>
<SaturationSpectrum defaultValue="red" />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