Package Exports
- rc-color-picker
- rc-color-picker/assets/index.css
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
rc-color-picker
React Color Picker
Browser Support
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
Chrome 31.0+ ✔ | Edge 12.0+ ✔ | Firefox 31.0+ ✔ | IE 10+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Screenshots

Development
npm install
npm start
Example
online example: http://react-component.github.io/color-picker/
Feature
- support color mode RGB HSB HSL
install
Usage
var ColorPicker = require('rc-color-picker');
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<ColorPicker />, container);
API
ColorPicker.props
name | type | default | description |
---|---|---|---|
animation | String | index.css support 'slide-up' | |
transitionName | String | css class for animation | |
getCalendarContainer | Function():Element | function(){return document.body;} | dom node where picker to be rendered into |
align | Object: alignConfig of dom-align | popup 's align config | |
alpha | Number | 100 | opacity of the color |
defaultAlpha | Number | 100 | opacity of the color |
color | String | #ff0000 | color board current background color |
defaultColor | String | #ff0000 | color board current background color |
onChange | Function | noop | when select color |
onOpen | Function | noop | when color picker popup open |
onClose | Function | noop | when color picker popup close |
placement | String | topLeft | one of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
mode | String | 'RGB' | color mode, support mode 'RGB', 'HSB' or 'HSL' |
children | Node | <span className='react-colorpicker-trigger'></span> |
additional trigger appended to picker |
className | String | '' | Aditional class to be added to component |
ColorPicker.Panel.props
name | type | default | description |
---|---|---|---|
alpha | Number | 100 | opacity of the color |
defaultAlpha | Number | 100 | opacity of the color |
color | String | #ff0000 | color board current background color |
defaultColor | String | #ff0000 | color board current background color |
style | Object | {} | root node CSS style |
onChange | Function | when select color trigger | |
onFocus | Function | when picker focus trigger | |
onBlur | Function | when picker loose focus | |
mode | String | 'RGB' | color mode, support mode 'RGB', 'HSB' or 'HSL' |
className | String | '' | Aditional class to be added to component |
License
rc-color-picker is released under the MIT license.