パッケージの詳細

@uiw/react-color-swatch

uiwjs320.2kMIT2.6.0

Color swatch component for React.

react, react-color, react-component, color-picker

readme

React Color Swatch

Buy me a coffee npm bundle size npm version Open in unpkg

Swatch Component is a subcomponent of @react-color.

react-color-swatch

Install

npm i @uiw/react-color-swatch

Usage

```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 { 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: React.CSSProperties;
  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.