🎨 ColourPicker

🧪 Comprehensive test suite

🐭 Lightweight

🏗 Extensible

🖼 Easily-stylable

Live Demo

Click here to view

Installation

npm i react-colour-picker

Usage

import { ColourPicker } from 'react-colour-picker';

export default function App() {
    return (
        <ColourPicker onColourUpdate={(colour) => doSomething(colour)} />
    );
}

Most apps will probably be perfectly fine with <input type="color" /> and there isn't a great deal this package can do on its own - you will most likely want to use it as a building block for a more complicated UI.

Styling

Fully stylable, using regular CSS, the following classes are made available:

.colourPicker {/* Styles the main container*/}
.palette {/* The palette, in the middle */}
.hueScale {/* The hue scale, on the right */}
.marker {/* The marker rings */}
.colourSwatch {/* The colour block and input, at the bottom */}

Development

A CRA project is used, in /demo, not only for the above demo page, but also for the actual development of the component; so we can benefit from all of the niceties that CRA bundles, without lumbering them on the users of the npm package! 😉

To run the local demo:

cd demo && npm start
# In a separate tab:
npm test

Tests:

# Run all tests, once:
npm test -- --watchAll=false
# Code coverage report:
npm run coverage

Distribution

A separate bundler, Rollup, is used to produce a lighter distribution. It's run from the project's root:

npm run build