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

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

Development

To run demo locally on localhost:8080:

npm install
npm start

Test

To run test just type:

npm run test