color-chooser

    1.1.19 • Public • Published

    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>
            );
        }
    }

    Contributing

    Feel free to make changes and submit pull requests whenever.

    License

    ColorChooser uses the MIT license.

    Install

    npm i color-chooser

    DownloadsWeekly Downloads

    3

    Version

    1.1.19

    License

    MIT

    Unpacked Size

    48.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • obsius