uiwjs
React Color Swatch
Swatch Component is a subcomponent of @react-color.
Install
npm i @uiw/react-color-swatchUsage
```tsx mdx:preview import React, { useState } from 'react'; import { hsvaToHex, getContrastingColor, } from '@uiw/color-convert'; import Swatch from '@uiw/react-color-swatch';
function Point(props: { color?: string; checked?: boolean }) { if (!props.checked) return null; return (
function Demo() { const [hex, setHex] = useState("#fff"); return ( <Swatch colors={[ '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00' ]} color={hex} rectProps={{ children: <Point />, style: { display: 'flex', alignItems: 'center', justifyContent: 'center', }, }} onChange={(hsvColor) => { setHex(hsvaToHex(hsvColor)) }} /> ); }
export default Demo;
## Props
```ts
import React from 'react';
import type * as CSS from 'csstype';
import { HsvaColor, ColorResult } from '@uiw/color-convert';
export type SwatchPresetColor = {
color: string;
title?: string;
} | string;
export interface SwatchRectRenderProps extends React.HTMLAttributes<HTMLDivElement> {
title: string;
color: string;
checked: boolean;
style: CSS.Properties<string | number>;
onClick: (evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
};
export interface SwatchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
prefixCls?: string;
color?: string;
colors?: SwatchPresetColor[];
rectProps?: React.HTMLAttributes<HTMLDivElement>;
rectRender?: (props: SwatchRectRenderProps) => JSX.Element;
onChange?: (hsva: HsvaColor, color: ColorResult, evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
addonAfter?: React.ReactNode;
addonBefore?: React.ReactNode;
}
declare const Swatch: React.ForwardRefExoticComponent<SwatchProps & React.RefAttributes<HTMLDivElement>>;
export default Swatch;Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
Licensed under the MIT License.