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

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" ></polygon>
            </svg>
        );
    }
    renderRect = ({ color, x, y }) => {
        return (
            <circle
                cx={x + 14}
                cy={y + 14}
                r="14"
                fill={color}
            ></circle>
        );
    }
    render() {
        return (
            <ColorPicker
                renderRect={this.renderRect}
                centerRect={true}
                renderHandle={this.renderHandle}                
            />
        );
    }
}

Props

Development

To run demo locally on localhost

npm install
npm start

Test

To run test type:

npm run test