UNPKG

rc-color-picker

Version:

color-picker ui component for react

github.com/react-component/color-picker

react-component/color-picker

92 lines (67 loc) • 7.16 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
# rc-color-picker --- React Color Picker [![npm version](http://img.shields.io/npm/v/rc-color-picker.svg)](https://www.npmjs.org/package/rc-color-picker) [![npm download](http://img.shields.io/npm/dm/rc-color-picker.svg)](https://www.npmjs.org/package/rc-color-picker) [![npm dependency](https://david-dm.org/react-component/color-picker.svg)](https://david-dm.org/react-component/color-picker) [![Build Status](https://travis-ci.org/react-component/color-picker.svg?branch=master)](https://travis-ci.org/react-component/color-picker) ## Browser Support | ![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) | | --- | --- | --- | --- | --- | --- | | Chrome 31.0+ ✔ | Edge 12.0+ ✔ | Firefox 31.0+ ✔ | IE 10+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ | ## Screenshots <img src=https://cloud.githubusercontent.com/assets/1292082/8275606/8608e8f8-18db-11e5-8d10-703253db2a4f.png width=238 /> ## Development ``` npm install npm start ``` ## Example online example: [http://react-component.github.io/color-picker/](http://react-component.github.io/color-picker/) ## Feature * support color mode RGB HSB HSL ## install [![rc-color-picker](https://nodei.co/npm/rc-color-picker.png)](https://npmjs.org/package/rc-color-picker) ## Usage ```js 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](https://github.com/yiminghe/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.