@rc-component/color-picker
React Color Picker.
install
Development
npm install
npm start
Example
Usage
import ColorPicker from '@rc-component/color-picker';
export default () => <ColorPicker />;API
| Property | Description | Type | Default |
|---|---|---|---|
| value | Value of color | string | Color |
- |
| defaultValue | Default value of color | string | Color |
- |
| onChange | Callback when value is changed |
(value: Color, type: hue | alpha) => void |
- |
| onChangeComplete | Callback when drag is stop |
(value: Color, type: hue | alpha) => void |
- |
| disabled | Disabled ColorPicker | boolean | false |
| disabledAlpha | Disabled alpha slider | boolean | false |
| panelRender | Custom panel render | (panel: React.ReactElement) => React.ReactElement |
- |
Color
| Property | Description | Type | Default |
|---|---|---|---|
| toHexString | Convert to hex format color string, like #ffffff |
() => string |
- |
| toHsb | Convert to hsb object, like { h: 0, s: 0, b: 0, a: 0 } |
() => ({ h: number, s: number, b: number, a number }) |
- |
| toHsbString | Convert to hsb format color string, like hsba(0, 0%, 0%, 0) |
() => string |
- |
| toRgb | Convert to rgb object, like { r: 0, g: 0, b: 0, a: 0 } |
() => ({ r: number, g: number, b: number, a number }) |
- |
| toRgbString | Convert to rgb format color string, like rgba(0, 0, 0, 0) |
() => string |
- |
Test Case
npm test
or
npm run coverage
License
@rc-component/color-picker is released under the MIT license.