https://github.com/huangbuyi/react-colors

A customizable color picker
https://github.com/huangbuyi/react-colors

chrome color-picker colors photoshop react

Last synced: 2 months ago
JSON representation

A customizable color picker

• Host: GitHub
• URL: https://github.com/huangbuyi/react-colors
• Owner: huangbuyi
• Created: 2017-02-28T13:51:40.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-08T18:37:39.000Z (over 7 years ago)
• Last Synced: 2024-09-30T17:02:31.809Z (3 months ago)
• Topics: chrome, color-picker, colors, photoshop, react
• Language: JavaScript
• Homepage: https://huangbuyi.github.io/react-colors/
• Size: 2.08 MB
• Stars: 10
• Watchers: 2
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Customizable color picker

[![](https://img.shields.io/travis/huangbuyi/react-colors.svg)](https://travis-ci.org/huangbuyi/react-colors)

[![Codecov](https://img.shields.io/codecov/c/github/huangbuyi/react-colors.svg)](https://codecov.io/github/huangbuyi/react-colors)

[![NPM downloads](https://img.shields.io/npm/dt/react-colors.svg)](https://www.npmjs.com/package/react-colors)

[![NPM downloads](https://img.shields.io/npm/v/react-colors.svg)](https://www.npmjs.com/package/react-colors)

[![NPM downloads](https://img.shields.io/npm/l/react-colors.svg)](https://www.npmjs.com/package/react-colors)

![react-colors](http://onw3okkga.bkt.gdipper.com/react-colors.jpg)

## Install

```js

npm install react-colors --save

```

## Usage

### Assembled Components 

```jsx

import React from 'react'

import {Chrome} from 'react-colors/lib/pickers'

const Picker = () =>  

```

So far, you can import `ChromeP` `Photoshop`.All assembled picker assemble from customizable components.

### Custom color picker 

```jsx

import React from 'react'

import {ColorPicker, ColorPanel, ColorBar} from 'react-colors'

const styles = {

  pandelDiv: {width: 255, height: 255},

  barDiv: {width: 20, height: 255, marginLeft: 20}

}

const MyPicker = () => (

  

    


      	

    

    


      

    

  

)

```

There are a container components and 5 differents child components. You can style and layout them through any label marked `data-color` as `true` value, or pass style props in.  


- `ColorBar`: One-dimensional color picker. Suppot Red, Green, Blue, Hue, Saturation, Value(Brightness) channel. 

- `ColorPanel`: Two-dimensional color picker. Support Red-Green, Green-Blue, Red-Blue, Saturation-Value, Hue-Value, Hue-Saturation model.

- `ColorInput`: Number input. Support RGB, HSV, Lab, CMYK, Alpha color model. 

- `ColorRadio`: A radio to toggle color model. 

- `ColorBlock`: A color block fill a color.