React Circular Color picker

A circular color picker component also named color-wheel performed with react and pure svg. Mobile compatible.

Installation

npm install react-circular-color

Usage

import React, { Component } from 'react';

import CircularColor from 'react-circular-color';


class ExampleComponent extends Component {
  handleColorChange(color) {
    console.log(color); // it will be string with a color hash e.g. #1c1c1c
  }

  render() {
    return (
      <CircularColor size={200} onChange={this.handleColorChange} />
    );
  }
}

Customized elements

import React, { Component } from 'react';
import ColorPicker from 'react-color-picker';

export default class CustomizedColorPicker extends Component {

    renderHandle = ({ onHandleDown, cx, cy, handleRadius }) => {
        return(
            <svg x={cx-10} y={cy-10} width={20} height={20} > 
            <polygon points={'10,0 0,20 20,20'} fill="#fff" />
            </svg>
        );
    }

    renderRect = ({ color, x, y }) => {
        return (
            <circle
                cx={x + 14}
                cy={y + 14}
                r="14"
                fill={color}
            />
        );
    }

    render() {
        return (
            <ColorPicker
                renderRect={this.renderRect}
                centerRect={true}
                renderHandle={this.renderHandle}                
            />
        );
    }
}

Props

| Name | Description | | ---- | ----------- | | size | Numeric size of the element in pixels. Default: 200 | | numberOfSectors | Number of wheel's sectors. Default: 360 | | className | Classes to apply to the svg element | | centerRect | Whether to display central rectangle with picked color. Default: false. | | onChange | Fired when the color is changing | | renderRect | Use it to customize how the central rectangle with picked color is rendered. Function recieves one object with color, x & y keys | | renderHandle | Use it to customize how the circular color handle is rendered. Function recieves one object with cx, cy, onHandleDown & handleRadius keys | | color | String value of color. Default:#f2ff00 |

Development

To run demo locally on localhost:8080:

npm install
npm start

Test

To run test type:

npm run test