Skip to content

react-component/color-picker

Repository files navigation

@rc-component/color-picker

React Color Picker.

NPM version dumi build status Test coverage npm download bundle size

install

@rc-component/color-picker

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.