Package Exports

react-circular-color

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-circular-color) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Circular Color picker

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

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