Package Exports

react-colour-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-colour-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎨 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