React Color Wheel
Wheel Component is a subcomponent of @react-color
.
Install
npm i @uiw/react-color-wheel
Usage
import Wheel from '@uiw/react-color-wheel';
function Demo() {
const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
return (
<Wheel
hsva={hsva}
onChange={(color) => {
setHsva({ ...hsva, ...color.hsva });
}}
/>
);
}
Props
import { HsvaColor, ColorResult } from '@uiw/color-convert';
interface WheelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
prefixCls?: string;
color?: string | HsvaColor;
width?: number;
height?: number;
radius?: React.CSSProperties['borderRadius'];
angle?: number;
direction?: 'clockwise' | 'anticlockwise';
pointer?: ({ prefixCls, left, top, color }: PointerProps) => JSX.Element;
onChange?: (color: ColorResult) => void;
}
interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
prefixCls?: string;
top?: string;
left: string;
color?: string;
}
License
Licensed under the MIT License.