HubSpot/react-colors-picker

Name: react-colors-picker

Owner: HubSpot

Description: React ColorPicker

Forked from: react-component/color-picker

Created: 2016-02-23 18:40:36.0

Updated: 2017-04-21 10:43:55.0

Pushed: 2016-03-15 18:50:01.0

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

Size: 1062

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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

install
start

Example

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

Feature

• support color mode RGB HSB HSL

install

Usage

ColorsPicker = require('react-colors-picker');
React = require('react');
ReactDOM = require('react-dom');
tDOM.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.