Noisy Pillaging Monster

    @lukeboyle/react-color-picker

    1.0.3 • Public • Published

    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

    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.

    Keywords

    none

    Install

    npm i @lukeboyle/react-color-picker

    DownloadsWeekly Downloads

    2

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • lukeboyle