1 | # rc-color-picker
|
2 | ---
|
3 |
|
4 | React Color Picker
|
5 |
|
6 | [![npm version](http://img.shields.io/npm/v/rc-color-picker.svg)](https://www.npmjs.org/package/rc-color-picker)
|
7 | [![npm download](http://img.shields.io/npm/dm/rc-color-picker.svg)](https://www.npmjs.org/package/rc-color-picker)
|
8 | [![npm dependency](https://david-dm.org/react-component/color-picker.svg)](https://david-dm.org/react-component/color-picker)
|
9 | [![Build Status](https://travis-ci.org/react-component/color-picker.svg?branch=master)](https://travis-ci.org/react-component/color-picker)
|
10 |
|
11 | ## Browser Support
|
12 |
|
13 | | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) |
|
14 | | --- | --- | --- | --- | --- | --- |
|
15 | | Chrome 31.0+ ✔ | Edge 12.0+ ✔ | Firefox 31.0+ ✔ | IE 10+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
|
16 |
|
17 | ## Screenshots
|
18 |
|
19 | <img src=https://cloud.githubusercontent.com/assets/1292082/8275606/8608e8f8-18db-11e5-8d10-703253db2a4f.png width=238 />
|
20 |
|
21 | ## Development
|
22 |
|
23 | ```
|
24 | npm install
|
25 | npm start
|
26 | ```
|
27 |
|
28 | ## Example
|
29 |
|
30 | online example: [http://react-component.github.io/color-picker/](http://react-component.github.io/color-picker/)
|
31 |
|
32 | ## Feature
|
33 |
|
34 | * support color mode RGB HSB HSL
|
35 |
|
36 | ## install
|
37 |
|
38 | [![rc-color-picker](https://nodei.co/npm/rc-color-picker.png)](https://npmjs.org/package/rc-color-picker)
|
39 |
|
40 | ## Usage
|
41 |
|
42 | ```js
|
43 | var ColorPicker = require('rc-color-picker');
|
44 | var React = require('react');
|
45 | var ReactDOM = require('react-dom');
|
46 | ReactDOM.render(<ColorPicker />, container);
|
47 | ```
|
48 |
|
49 | ## API
|
50 |
|
51 | ### ColorPicker.props
|
52 |
|
53 | | name | type | default | description |
|
54 | |:---------------------|:--------------------------------------------------------------------------|:------------------------------------------------------|:------------------------------------------------------------|
|
55 | | align | Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) | | popup 's align config |
|
56 | | alpha | Number | `100` | opacity of the color |
|
57 | | animation | String | | index.css support 'slide-up' |
|
58 | | children | Node | `<span className='react-colorpicker-trigger'></span>` | additional trigger appended to picker |
|
59 | | className | String | '' | Aditional class to be added to component |
|
60 | | color | String | `#ff0000` | color board current background color |
|
61 | | defaultAlpha | Number | `100` | opacity of the color |
|
62 | | defaultColor | String | `#ff0000` | color board current background color |
|
63 | | enableAlpha | Boolean | `true` | enable alpha controls |
|
64 | | getCalendarContainer | Function():Element | `function(){return document.body;}` | dom node where picker to be rendered into |
|
65 | | mode | String | `RGB` | color mode, support mode 'RGB', 'HSB' or 'HSL' |
|
66 | | onChange | Function | noop | when select color |
|
67 | | onClose | Function | noop | when color picker popup close |
|
68 | | onOpen | Function | noop | when color picker popup open |
|
69 | | placement | String | `topLeft` | one of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
|
70 | | transitionName | String | | css class for animation |
|
71 |
|
72 |
|
73 | ### ColorPicker.Panel.props
|
74 |
|
75 | | name | type | default | description |
|
76 | |:-------------|:---------|:----------|:-----------------------------------------------|
|
77 | | alpha | Number | `100` | opacity of the color |
|
78 | | className | String | `''` | Aditional class to be added to component |
|
79 | | color | String | `#ff0000` | color board current background color |
|
80 | | defaultAlpha | Number | `100` | opacity of the color |
|
81 | | defaultColor | String | `#ff0000` | color board current background color |
|
82 | | enableAlpha | Boolean | `true` | enable alpha controls |
|
83 | | mode | String | `RGB` | color mode, support mode 'RGB', 'HSB' or 'HSL' |
|
84 | | onBlur | Function | | when picker loose focus |
|
85 | | onChange | Function | | when select color trigger |
|
86 | | onFocus | Function | | when picker focus trigger |
|
87 | | style | Object | `{}` | root node CSS style |
|
88 |
|
89 | ## License
|
90 |
|
91 | rc-color-picker is released under the MIT license.
|