@uiw/react-color-sketch
v2.3.2
Published
Color Sketch component for React.
Downloads
125,796
Readme
React Color Sketch
Sketch Component is a subcomponent of @react-color
.
Install
npm i @uiw/react-color-sketch
Usage
import React, { useState } from 'react';
import Sketch from '@uiw/react-color-sketch';
function Demo() {
const [hex, setHex] = useState("#fff");
const [disableAlpha, setDisableAlpha] = useState(false);
return (
<div>
<Sketch
style={{ marginLeft: 20 }}
color={hex}
disableAlpha={disableAlpha}
onChange={(color) => {
setHex(color.hex);
}}
/>
<button onClick={() => setDisableAlpha(!disableAlpha)}>
disableAlpha={disableAlpha.toString()}
</button>
</div>
);
}
export default Demo;
Props
import React from 'react';
import { HsvaColor, ColorResult } from '@uiw/color-convert';
import { SwatchPresetColor } from '@uiw/react-color-swatch';
export interface SketchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
prefixCls?: string;
width?: number;
color?: string | HsvaColor;
presetColors?: false | SwatchPresetColor[];
editableDisable?: boolean;
disableAlpha?: boolean;
onChange?: (newShade: ColorResult) => void;
}
declare const Sketch: React.ForwardRefExoticComponent<SketchProps & React.RefAttributes<HTMLDivElement>>;
export default Sketch;
Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
Licensed under the MIT License.