# rc-color-picker > color-picker ui component for react Latest version **1.2.6** (published 2018-03-01) · MIT license · 0 weekly downloads ## Install ```sh npm install rc-color-picker pnpm add rc-color-picker yarn add rc-color-picker bun add rc-color-picker ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: no vulnerabilities; high maintenance score. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 1.2.6 | | Published | 2018-03-01 | | First published | 2016-05-31 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 1.8 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 453 | | Author | noyobo | | Maintainers | benjycui, noyobo, paranoidjk, shepherdwind, yiminghe | | Keywords | react, react-component, react-color-picker, color-picker | ## Links - npm: https://www.npmjs.com/package/rc-color-picker - Repository: https://github.com/react-component/color-picker - Homepage: http://github.com/react-component/color-picker - Issues: http://github.com/react-component/color-picker/issues - npm.io page: https://npm.io/package/rc-color-picker ## Dependencies (5) - [rc-util](https://npm.io/package/rc-util.md) ^4.0.2 - [classnames](https://npm.io/package/classnames.md) ^2.2.5 - [prop-types](https://npm.io/package/prop-types.md) ^15.5.8 - [rc-trigger](https://npm.io/package/rc-trigger.md) 1.x - [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.2.6 (latest) — 2018-03-01 - 1.2.5 — 2018-02-28 - 1.2.4 — 2018-02-28 - 1.2.3 — 2017-11-10 - 1.2.2 — 2017-10-25 - 1.2.1 — 2017-10-25 - 1.2.0 — 2017-10-14 - 1.1.7 — 2017-07-01 - 1.1.6 — 2017-06-30 - 1.1.5 — 2017-05-20 - 1.1.4 — 2017-04-02 - 1.1.3 — 2017-01-05 - 1.1.2 — 2016-12-17 - 1.1.1 — 2016-12-17 - 1.1.0 — 2016-07-25 - … 2 more at https://npm.io/package/rc-color-picker/versions ## README # 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 ## 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(, 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 | `` | 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. --- _Source: https://npm.io/package/rc-color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._