React Color Circle
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://x.com/jaywcjlove)
[](https://www.npmjs.com/package/@uiw/react-color-circle)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-circle/file/README.md)
Circle Component is a subcomponent of [**`@react-color`**](https://uiwjs.github.io/react-color).
[](https://uiwjs.github.io/react-color/#/circle)
## Install
```bash
npm i @uiw/react-color-circle
```
## Usage
```jsx mdx:preview
import React, { useState } from 'react';
import Circle from '@uiw/react-color-circle';
export default function Demo() {
const [hex, setHex] = useState('#F44E3B');
return (
{
setHex(color.hex);
}}
/>
);
}
```
Modify point style
```jsx mdx:preview
import React, { useState } from 'react';
import Circle from '@uiw/react-color-circle';
export default function Demo() {
const [hex, setHex] = useState('#F44E3B');
return (
{
setHex(color.hex);
}}
/>
);
}
```
## Props
```ts
import React from 'react';
import { HsvaColor, ColorResult } from '@uiw/color-convert';
import { SwatchProps } from '@uiw/react-color-swatch';
export interface CircleProps extends Omit {
color?: string | HsvaColor;
onChange?: (color: ColorResult) => void;
pointProps?: React.HTMLAttributes;
}
declare const Circle: React.ForwardRefExoticComponent>;
export default Circle;
```
## Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
