React Color Picker.
npm install
npm start
import ColorPicker from '@rc-component/color-picker';
import '@rc-component/color-picker/assets/index.css';
export default () => <ColorPicker />;
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 |
- |
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 |
- |
npm test
or
npm run coverage
@rc-component/color-picker is released under the MIT license.