React-colors-picker NPM

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'