@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.