@canner/rc-color-picker

color-picker ui component for react

Usage no npm install needed!

<script type="module">
  import cannerRcColorPicker from 'https://cdn.skypack.dev/@canner/rc-color-picker';
</script>

README

rc-color-picker


React Color Picker

npm version npm download npm dependency

Browser Support

IE Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ 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
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'
children 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

rc-color-picker is released under the MIT license.