Material UI Color Picker

Material UI React Color Picker (A fork of rc-color-picker)

Screenshots

Features

• Supports color modes RGB, HSB and HSL
• Uses the latest material-ui components

Installation

yarn add material-ui-rc-color-picker

OR

npm install material-ui-rc-color-picker

Usage

As a button which toggles the panel in a dropdown

import ColorPicker from 'material-ui-rc-color-picker';
import 'material-ui-rc-color-picker/assets/index.css';

...

<ColorPicker
  enableAlpha={false}
  color="#fafafa"
  onChange={this.onChange}
  mode="RGB" />

As a panel (No button to show. Shown directly on page)

import { Panel as ColorPickerPanel } from 'material-ui-rc-color-picker';
import 'material-ui-rc-color-picker/assets/index.css';

...

<ColorPickerPanel
  color="#fafafa"
  onChange={this.onChange}
  mode="RGB" />

Avaliable Props

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 |