https://github.com/ubcent/react-circular-color
A circular color picker component also named color-wheel performed with react and pure svg
https://github.com/ubcent/react-circular-color
javascript-library react react-component react-components reactjs svg
Last synced: 2 months ago
JSON representation
A circular color picker component also named color-wheel performed with react and pure svg
- Host: GitHub
- URL: https://github.com/ubcent/react-circular-color
- Owner: ubcent
- License: mit
- Created: 2017-08-17T12:59:31.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-07-07T13:05:04.000Z (almost 4 years ago)
- Last Synced: 2025-11-27T09:45:17.605Z (7 months ago)
- Topics: javascript-library, react, react-component, react-components, reactjs, svg
- Language: TypeScript
- Homepage:
- Size: 650 KB
- Stars: 33
- Watchers: 2
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Circular Color picker [](https://www.npmjs.com/package/react-circular-color)
A circular color picker component also named color-wheel performed with react and pure svg. Mobile compatible.
 
# Installation
```bash
npm install react-circular-color
```
# Usage
```javascript
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 (
);
}
}
```
# Customized elements
```javascript
import React, { Component } from 'react';
import ColorPicker from 'react-color-picker';
export default class CustomizedColorPicker extends Component {
renderHandle = ({ onHandleDown, cx, cy, handleRadius }) => {
return(
);
}
renderRect = ({ color, x, y }) => {
return (
);
}
render() {
return (
);
}
}
```
# 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:
```bash
npm install
npm start
```
# Test
To run test type:
```bash
npm run test
```