@rc-component/color-picker
React Color Picker.
install
Development
npm install
npm start
Example
http://localhost:8000
Usage
import ColorPicker from '@rc-component/color-picker';
import '@rc-component/color-picker/assets/index.css';
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.
