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 | animation | String | | index.css support 'slide-up'
|
56 | transitionName | String | | css class for animation
|
57 | getCalendarContainer| Function():Element | function(){return document.body;} | dom node where picker to be rendered into
|
58 | align | Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)| | popup 's align config
|
59 | alpha | Number | 100 | opacity of the color
|
60 | defaultAlpha | Number | 100 | opacity of the color
|
61 | color | String | #ff0000 | color board current background color
|
62 | defaultColor | String | #ff0000 | color board current background color
|
63 | onChange | Function | noop | when select color
|
64 | onOpen | Function | noop | when color picker popup open
|
65 | onClose | Function | noop | when color picker popup close
|
66 | placement | String | topLeft | one of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']
|
67 | mode | String |'RGB' | color mode, support mode 'RGB', 'HSB' or 'HSL'
|
68 | children | Node |`<span className='react-colorpicker-trigger'></span>`|additional trigger appended to picker
|
69 | className | String | '' | Aditional class to be added to component
|
70 |
|
71 |
|
72 | ### ColorPicker.Panel.props
|
73 |
|
74 | name|type|default|description
|
75 | ---|---|---|---
|
76 | alpha | Number | 100 | opacity of the color
|
77 | defaultAlpha | Number | 100 | opacity of the color
|
78 | color | String | #ff0000 | color board current background color
|
79 | defaultColor | String | #ff0000 | color board current background color
|
80 | style | Object | {} | root node CSS style
|
81 | onChange | Function| | when select color trigger
|
82 | onFocus | Function| | when picker focus trigger
|
83 | onBlur | Function| | when picker loose focus
|
84 | mode | String |'RGB' | color mode, support mode 'RGB', 'HSB' or 'HSL'
|
85 | className | String | '' | Aditional class to be added to component
|
86 |
|
87 | ## License
|
88 |
|
89 | rc-color-picker is released under the MIT license.
|