@uiw/react-color-circle

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

React Color Circle

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}
      style={{
        gap: 23
      }}
      rectProps={{
        style: {
          borderRadius: 2,
          width: 18,
          height: 18,
        }
      }}
      pointProps={{
        style: {
          width: 26,
          height: 26,
          borderRadius: 5
        },
      }}
      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.