React Color Wheel
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://x.com/jaywcjlove)
[](https://www.npmjs.com/package/@uiw/react-color-wheel)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-wheel/file/README.md)
Wheel Component is a subcomponent of [**`@react-color`**](https://uiwjs.github.io/react-color).
[](https://uiwjs.github.io/react-color/#/wheel)
## Install
```bash
npm i @uiw/react-color-wheel
```
## Usage
```tsx mdx:preview
import React, { useState, Fragment } from 'react';
import Wheel from '@uiw/react-color-wheel';
import { hsvaToHex } from '@uiw/color-convert';
function Demo() {
const [hsva, setHsva] = useState({ h: 214, s: 43, v: 90, a: 1 });
return (
setHsva({ ...hsva, ...color.hsva })} />
);
}
export default Demo;
```
```tsx mdx:preview
import React, { useState } from 'react';
import Wheel from '@uiw/react-color-wheel';
import { hsvaToHex } from '@uiw/color-convert';
function Demo() {
const [hsva, setHsva] = useState({ h: 214, s: 43, v: 90, a: 1 });
return (
);
}
export default Demo;
```
```tsx mdx:preview
import React, { useState, Fragment } from 'react';
import Wheel from '@uiw/react-color-wheel';
import ShadeSlider from '@uiw/react-color-shade-slider';
import { hsvaToHex } from '@uiw/color-convert';
function Demo() {
const [hsva, setHsva] = useState({ h: 214, s: 43, v: 90, a: 1 });
return (
setHsva({ ...hsva, ...color.hsva })} />
{
setHsva({ ...hsva, ...newShade });
}}
/>
);
}
export default Demo;
```
### Custom Pointer
```tsx mdx:preview
import React, { useState, Fragment } from 'react';
import Wheel from '@uiw/react-color-wheel';
import ShadeSlider from '@uiw/react-color-shade-slider';
import { hsvaToHex } from '@uiw/color-convert';
function Demo() {
const [hsva, setHsva] = useState({ h: 214, s: 43, v: 90, a: 1 });
return (
setHsva({ ...hsva, ...color.hsva })}
/* Passing the style prop is required in the topmost element. */
pointer={({ color, style }) => {
return (
);
}}
/>
{
setHsva({ ...hsva, ...newShade });
}}
/>
);
}
export default Demo;
```
## Props
```ts
import React from 'react';
import { HsvaColor, ColorResult } from '@uiw/color-convert';
import type * as CSS from 'csstype';
import { PointerProps } from './Pointer';
export interface WheelProps extends Omit, 'onChange' | 'color'> {
prefixCls?: string;
color?: string | HsvaColor;
width?: number;
height?: number;
radius?: CSS.Properties['borderRadius'];
/** Direction of the oval: 'x' or 'y'. */
oval?: string;
/** Starting angle of the color wheel's hue gradient, measured in degrees. */
angle?: number;
/** Direction of the color wheel's hue gradient; either clockwise or anticlockwise. Default: `anticlockwise` */
direction?: 'clockwise' | 'anticlockwise';
/** Passing the style prop is required in the topmost element. */
pointer?: ({ color, style }: PointerProps) => JSX.Element;
onChange?: (color: ColorResult) => void;
}
declare const Wheel: React.ForwardRefExoticComponent>;
export default Wheel;
```
## Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
