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.