@uiw/react-color-circle
v2.3.4
Published
Color swatch component for React.
Downloads
108,481
Readme
React Color Swatch
Circle Component is a subcomponent of @react-color
.
Install
npm i @uiw/react-color-circle
Usage
import React, { useState } from 'react';
import Circle from '@uiw/react-color-circle';
export default function Demo() {
const [hex, setHex] = useState('#F44E3B');
return (
<Circle
colors={[ '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00' ]}
color={hex}
onChange={(color) => {
setHex(color.hex);
}}
/>
);
}
Modify point style
import React, { useState } from 'react';
import Circle from '@uiw/react-color-circle';
export default function Demo() {
const [hex, setHex] = useState('#F44E3B');
return (
<Circle
colors={[
'#f44336',
'#e91e63',
'#9c27b0',
'#673ab7',
'#3f51b5',
'#2196f3',
]}
color={hex}
pointProps={{
style: {
marginRight: 20,
},
}}
onChange={(color) => {
setHex(color.hex);
}}
/>
);
}
Props
import React from 'react';
import { HsvaColor, ColorResult } from '@uiw/color-convert';
import { SwatchProps } from '@uiw/react-color-swatch';
export interface CircleProps extends Omit<SwatchProps, 'color' | 'onChange'> {
color?: string | HsvaColor;
onChange?: (color: ColorResult) => void;
pointProps?: React.HTMLAttributes<HTMLDivElement>;
}
declare const Circle: React.ForwardRefExoticComponent<CircleProps & React.RefAttributes<HTMLDivElement>>;
export default Circle;
Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
Licensed under the MIT License.