React Color Sketch
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://x.com/jaywcjlove)
[](https://www.npmjs.com/package/@uiw/react-color-sketch)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-sketch/file/README.md)
Sketch Component is a subcomponent of [**`@react-color`**](https://uiwjs.github.io/react-color).
[](https://uiwjs.github.io/react-color/#/sketch)
## Install
```bash
npm i @uiw/react-color-sketch
```
## Usage
```jsx mdx:preview
import React, { useState } from 'react';
import Sketch from '@uiw/react-color-sketch';
function Demo() {
const [hsva, setHsva] = useState({ h: 214, s: 43, v: 90, a: 1 });
const [disableAlpha, setDisableAlpha] = useState(false);
return (
{
setHsva(color.hsva);
}}
/>
{
setHsva(color.hsva);
}}
/>
);
}
export default Demo;
```
Set presetColors Example
```jsx mdx:preview
import React, { useState } from 'react';
import Sketch from '@uiw/react-color-sketch';
const PRESET_COLORS = [
'#D0021B',
'#F5A623',
'#f8e61b',
'#8B572A',
'#7ED321',
'#417505',
'#BD10E0',
'#9013FE',
];
function Demo() {
const [hex, setHex] = useState("#fff");
const [disableAlpha, setDisableAlpha] = useState(false);
return (
{
setHex(color.hex);
}}
/>
);
}
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, '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>;
export default Sketch;
```
## Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
