node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »

react-colors-picker

react-colors-picker


colors picker ui component for react

npm version npm download build status npm dependencise

Browser Support

IE Chrome Firefox Opera Safari
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

react-colors-picker

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.