Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets fix: Hex input check after enter or blur. Close #52 Nov 10, 2017
examples chore: update demo Mar 1, 2018
src style: fix code style Mar 1, 2018
.editorconfig reace-colors-picker 1.0.0 Jul 4, 2015
.gitignore chore: ignore .vscode Oct 25, 2017
.travis.yml test: travis node env 6 7 Apr 2, 2017
History.md 1.2.3 Nov 10, 2017
README.md docs: update readme.md Jul 1, 2017
index.js example dev when npm start Jul 6, 2015
package.json 1.2.6 Mar 1, 2018

README.md

rc-color-picker


React Color Picker

npm version npm download npm dependency Build Status

Browser Support

Chrome Edge Firefox IE Opera Safari
Chrome 31.0+ ✔ Edge 12.0+ ✔ Firefox 31.0+ ✔ IE 10+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

Screenshots

Development

npm install
npm start

Example

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

Feature

  • support color mode RGB HSB HSL

install

rc-color-picker

Usage

var ColorPicker = require('rc-color-picker');
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.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.