Install

npm i @uiw/react-color-swatch

Usage

importReact,{useState}from'react';import{hsvaToHex,getContrastingColor,}from'@uiw/color-convert';importSwatchfrom'@uiw/react-color-swatch';functionPoint(props:{color?:string;checked?:boolean}){if(!props.checked)returnnull;return(<divstyle={{height:5,width:5,borderRadius:'50%',backgroundColor:getContrastingColor(props.color!),}}/>);}functionDemo(){const[hex,setHex]=useState("#fff");return(<Swatchcolors={['#F44E3B','#FE9200','#FCDC00','#DBDF00']}color={hex}rectProps={{children:<Point/>,style:{display:'flex',alignItems:'center',justifyContent:'center',},}}onChange={(hsvColor)=>{setHex(hsvaToHex(hsvColor))}}/>);}exportdefaultDemo;

Props

importReactfrom'react';import{HsvaColor,ColorResult}from'@uiw/color-convert';exporttypeSwatchPresetColor={color:string;title?:string;}|string;exportinterfaceSwatchRectRenderPropsextendsReact.HTMLAttributes<HTMLDivElement>{title:string;color:string;checked:boolean;style:React.CSSProperties;onClick:(evn:React.MouseEvent<HTMLDivElement,MouseEvent>)=>void;};exportinterfaceSwatchPropsextendsOmit<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;}declareconstSwatch:React.ForwardRefExoticComponent<SwatchProps&React.RefAttributes<HTMLDivElement>>;exportdefaultSwatch;

Contributors

License