JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 23557
  • Score
    100M100P100Q147964F
  • License MIT

color-picker ui component for react

Package Exports

  • rc-color-picker
  • rc-color-picker/assets/index.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
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.