JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Color Picker

    React ColorPicker
    Filed under 

    • 🔾32%Overall
    • 289
    • 13.7 days
    • 🕩56
    • 👥21

    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
    align Object: alignConfig of 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.

    Show All