React Color Picker

A highly customisable color picker component for React. The color picker supports onClick, onTouchStart and onTouchMove.

View the demo site react-color-picker.3stacks.me

Installation

• npm install @lukeboyle/react-color-picker

Usage

import React from 'react';
import reactDom from 'react-dom';
import ColorPicker from '@lukeboyle/react-color-picker';

const mainElement = document.getElementById('root');

reactDom.render(<ColorPicker columns={7} height={400} width={500} style={{border: '1px solid black'}} onChange={console.debug.bind(console)}/>, mainElement);

Props

colors

• type: Array
• required: no
• default: see http://clrs.cc

Define your own array of hex codes and the color picker will fill in the canvas for you.

columns

• type: Number
• required: no
• default: 7

The number of columns to spread your colours across.

onChange

• type: Function
• required: yes
• default: none

The onChange function. Returns the hex color value chosen by user.

height

• type: Number
• required: no
• default: 500

The height in pixels of the canvas.

width

• type: Number
• required: no
• default: 500

The width in pixels of the canvas.

Problems

The rectangles are rendering at the wrong size

Make sure you aren't setting the width and height using CSS and use the props instead.