react-component/color-picker

Name: color-picker

Owner: react-component

Description: React ColorPicker

Created: 2015-07-04 16:27:56.0

Updated: 2018-05-22 10:04:50.0

Pushed: 2018-03-01 14:04:13.0

Homepage: http://react-component.github.io/color-picker/

Size: 3358

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

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

install
start

Example

online example: http://react-component.github.io/color-picker/

Feature

• support color mode RGB HSB HSL

install

Usage

ColorPicker = require('rc-color-picker');
React = require('react');
ReactDOM = require('react-dom');
tDOM.render(<ColorPicker />, container);

API

ColorPicker.props

| name | type | default | description | |:———————|:————————————————————————–|:——————————————————|:————————————————————| | align | Object: alignConfig of dom-align | | popup 's align config | | alpha | Number | 100 | opacity of the color | | animation | String | | index.css support 'slide-up' | | children | Node | <span className='react-colorpicker-trigger'></span> | additional trigger appended to picker | | className | String | '' | Aditional class to be added to component | | color | String | #ff0000 | color board current background color | | defaultAlpha | Number | 100 | opacity of the color | | defaultColor | String | #ff0000 | color board current background color | | enableAlpha | Boolean | true | enable alpha controls | | getCalendarContainer | Function():Element | function(){return document.body;} | dom node where picker to be rendered into | | mode | String | RGB | color mode, support mode 'RGB', 'HSB' or 'HSL' | | onChange | Function | noop | when select color | | onClose | Function | noop | when color picker popup close | | onOpen | Function | noop | when color picker popup open | | placement | String | topLeft | one of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | | transitionName | String | | css class for animation |

ColorPicker.Panel.props

| name | type | default | description | |:————-|:———|:———-|:———————————————–| | alpha | Number | 100 | opacity of the color | | className | String | '' | Aditional class to be added to component | | color | String | #ff0000 | color board current background color | | defaultAlpha | Number | 100 | opacity of the color | | defaultColor | String | #ff0000 | color board current background color | | enableAlpha | Boolean | true | enable alpha controls | | mode | String | RGB | color mode, support mode 'RGB', 'HSB' or 'HSL' | | onBlur | Function | | when picker loose focus | | onChange | Function | | when select color trigger | | onFocus | Function | | when picker focus trigger | | style | Object | {} | root node CSS style |

License

rc-color-picker is released under the MIT license.