Skip to content
A circular color picker component also named color-wheel performed with react and pure svg
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
assets
docs
src
test
.babelrc
.eslintrc
.gitignore
.npmignore
CODE_OF_CONDUCT.md
CONTRIBUTING.md
ISSUE_TEMPLATE.md
LICENSE
README.md
package.json
webpack.config.js

README.md

React Circular Color picker npm

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

circular color picker circular color picker

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
You can’t perform that action at this time.