Color-chooser NPM

Color Chooser

A React component for choosing colors.

Provides a widget for choosing a color, allows for editing and viewing of:

HEX
RGB
HSV
HSL
Alpha (pass property alpha to enable alpha channel)

Does not include funtionality to open or close the widget, this integration must be done manually.

All styling in CSS, override with your own style to customize.

Only depends on React.

Screenshots

screenshot1

Usage

<ColorChooser
    alpha                  // show the alpha layer
	color={'#00FF00'}      // css hex color
	onChange={callbackFn}  // pass a function to handle when the color changes
/>

Props

Name	Required	Description
`color`	Yes	A hex value for the color to show. `#00FF00` or `#00FF00FF` (alpha)
`onChange`	No	Callback for when the color is changed. Hex value of color.
`alpha`	No	Show the alpha layer.

Example

import React from 'react';
import ColorChooser from 'color-chooser';

import 'color-chooser/lib/color-chooser.css';
import './my-color-chooser-style-override.css';

class App extends React.Component {

    constructor(props) {
        super(props);
		
        this.state = {
            color: '#00FF00'
        };
    }

    handleColorChange = (color) => {
        this.setState({
            ...this.state,
            color: color
        });
    };

    render() {

        let overlay = this.state.isOpen && (
            <div>
                <ColorChooser color={this.state.color} onChange={this.handleColorChange} />
            </div>
        );

        return (
            <div>
                <div>
                     { overlay }
                </div>
            </div>
        );
    }
}