@rc-component/color-picker

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

Similar packages

Other packages similar to @rc-component/color-picker

react-color

react-color is a popular color picker component for React applications. It offers a variety of color picker types, such as Sketch, Photoshop, and Chrome pickers. Compared to @rc-component/color-picker, react-color provides more predefined picker styles and is widely used in the React community.

react-colorful

react-colorful is a lightweight and fast color picker component for React. It focuses on performance and simplicity, providing a minimalistic interface for color selection. While @rc-component/color-picker offers more customization options, react-colorful is ideal for applications that require a straightforward and efficient color picker.

rc-color-picker

rc-color-picker is another color picker component for React, developed by the same team behind @rc-component/color-picker. It provides a similar set of features but with a different API and design. It is a good alternative for users who prefer a different approach to color picking.