uiwjs
React Color Sketch
Sketch Component is a subcomponent of @react-color.
Install
npm i @uiw/react-color-sketchUsage
`jsx mdx:preview
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 (
<Sketch
style={{ marginLeft: 20 }}
color={hex}
disableAlpha={disableAlpha}
onChange={(color) => {
setHex(color.hex);
}}
/>
<button onClick={() => setDisableAlpha(!disableAlpha)}>
disableAlpha={disableAlpha.toString()}
</button>
);
}
export default Demo;
## Props
```ts
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.