https://github.com/react-component/color-picker
React ColorPicker
https://github.com/react-component/color-picker
Last synced: 4 months ago
JSON representation
React ColorPicker
- Host: GitHub
- URL: https://github.com/react-component/color-picker
- Owner: react-component
- License: mit
- Created: 2015-07-04T16:27:56.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2025-03-21T07:27:12.000Z (9 months ago)
- Last Synced: 2025-08-22T03:56:33.994Z (4 months ago)
- Language: TypeScript
- Homepage: http://react-component.github.io/color-picker/
- Size: 7.74 MB
- Stars: 451
- Watchers: 25
- Forks: 93
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @rc-component/color-picker
React Color Picker.
[![NPM version][npm-image]][npm-url] [](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
[npm-image]: http://img.shields.io/npm/v/@rc-component/color-picker.svg?style=flat-square
[npm-url]: http://npmjs.org/package/@rc-component/color-picker
[github-actions-image]: https://github.com/react-component/color-picker/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/color-picker/actions
[coveralls-image]: https://img.shields.io/coveralls/react-component/color-picker.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/color-picker?branch=master
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/color-picker/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/color-picker/branch/master
[david-url]: https://david-dm.org/react-component/color-picker
[david-image]: https://david-dm.org/react-component/color-picker/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/color-picker?type=dev
[david-dev-image]: https://david-dm.org/react-component/color-picker/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@rc-component/color-picker.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/color-picker
[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/color-picker
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/color-picker
## install
[](https://npmjs.org/package/@rc-component/color-picker)
## Development
```
npm install
npm start
```
## Example
http://localhost:8000
## Usage
```js
import ColorPicker from '@rc-component/color-picker';
import '@rc-component/color-picker/assets/index.css';
export default () => ;
```
## 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.