^{Using my app is also a way to support me:}

React Color Circle

Circle Component is a subcomponent of @react-color.

Install

1npm i @uiw/react-color-circle

Usage

1import React, { useState } from 'react';
2import Circle from '@uiw/react-color-circle';
3
4export default function Demo() {
5  const [hex, setHex] = useState('#F44E3B');
6  return (
7    <Circle
8      colors={[ '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00' ]}
9      color={hex}
10      onChange={(color) => {
11        setHex(color.hex);
12      }}
13    />
14  );
15}

Modify point style

1import React, { useState } from 'react';
2import Circle from '@uiw/react-color-circle';
3
4export default function Demo() {
5  const [hex, setHex] = useState('#F44E3B');
6  return (
7    <Circle
8      colors={[
9        '#f44336',
10        '#e91e63',
11        '#9c27b0',
12        '#673ab7',
13        '#3f51b5',
14        '#2196f3',
15      ]}
16      color={hex}
17      style={{
18        gap: 23
19      }}
20      rectProps={{
21        style: {
22          borderRadius: 2,
23          width: 18,
24          height: 18,
25        }
26      }}
27      pointProps={{
28        style: {
29          width: 26,
30          height: 26,
31          borderRadius: 5
32        },
33      }}
34      onChange={(color) => {
35        setHex(color.hex);
36      }}
37    />
38  );
39}

Props

1import React from 'react';
2import { HsvaColor, ColorResult } from '@uiw/color-convert';
3import { SwatchProps } from '@uiw/react-color-swatch';
4export interface CircleProps extends Omit<SwatchProps, 'color' | 'onChange'> {
5  color?: string | HsvaColor;
6  onChange?: (color: ColorResult) => void;
7  pointProps?: React.HTMLAttributes<HTMLDivElement>;
8}
9declare const Circle: React.ForwardRefExoticComponent<CircleProps & React.RefAttributes<HTMLDivElement>>;
10export default Circle;

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.