@rc-component/color-picker

What is @rc-component/color-picker?

@rc-component/color-picker is a React component library that provides a customizable color picker component. It allows users to select colors using various input methods, such as sliders, input fields, and color palettes. The package is designed to be flexible and easy to integrate into React applications.

What are @rc-component/color-picker's main functionalities?

Basic Color Picker

This feature provides a basic color picker component that can be easily integrated into a React application. It allows users to select a color using a simple interface.

import React from 'react';
import { ColorPicker } from '@rc-component/color-picker';

const BasicColorPicker = () => (
  <ColorPicker />
);

export default BasicColorPicker;

Customizable Color Picker

This feature allows for customization of the color picker component. Users can set a default color, handle color changes with a callback function, and enable alpha channel selection.

import React from 'react';
import { ColorPicker } from '@rc-component/color-picker';

const CustomColorPicker = () => (
  <ColorPicker
    defaultColor="#ff0000"
    onChange={(color) => console.log(color)}
    showAlpha={true}
  />
);

export default CustomColorPicker;

Color Picker with Preset Colors

This feature allows the color picker to display a set of preset colors that users can choose from. It simplifies the color selection process by providing predefined color options.

import React from 'react';
import { ColorPicker } from '@rc-component/color-picker';

const PresetColorPicker = () => (
  <ColorPicker
    presetColors={['#ff0000', '#00ff00', '#0000ff']}
  />
);

export default PresetColorPicker;

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.

README

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