react-colors-picker
colors picker ui component for react
Browser Support
|
|
|
|
|
|
| --- | --- | --- | --- | --- |
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Screenshots
Development
npm install
npm start
Example
online example:
http://react-component.github.io/react-colors-picker/Feature
- support color mode RGB HSB HSL
install
Usage
var ColorsPicker = require('react-colors-picker');
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<ColorsPicker />, 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'
trigger | Node |
<span className='react-colorpicker-trigger'></span>
|additional trigger appended to picker
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'
License
react-colors-picker is released under the MIT license.