🚀 Socket Launch Week 🚀 Day 3: Socket Acquires Coana.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@uiw/react-color-sketch

Package Overview
Dependencies
Maintainers
0
Versions
89
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-color-sketch - npm Package Compare versions

Comparing version

2.4.1
to
2.4.2

16

package.json
{
"name": "@uiw/react-color-sketch",
"version": "2.4.1",
"version": "2.4.2",
"description": "Color Sketch component for React.",

@@ -51,9 +51,9 @@ "homepage": "https://uiwjs.github.io/react-color/#/sketch",

"dependencies": {
"@uiw/color-convert": "2.4.1",
"@uiw/react-color-alpha": "2.4.1",
"@uiw/react-color-editable-input": "2.4.1",
"@uiw/react-color-editable-input-rgba": "2.4.1",
"@uiw/react-color-hue": "2.4.1",
"@uiw/react-color-saturation": "2.4.1",
"@uiw/react-color-swatch": "2.4.1"
"@uiw/color-convert": "2.4.2",
"@uiw/react-color-alpha": "2.4.2",
"@uiw/react-color-editable-input": "2.4.2",
"@uiw/react-color-editable-input-rgba": "2.4.2",
"@uiw/react-color-hue": "2.4.2",
"@uiw/react-color-saturation": "2.4.2",
"@uiw/react-color-swatch": "2.4.2"
},

@@ -60,0 +60,0 @@ "devDependencies": {

41

README.md

@@ -48,2 +48,43 @@ React Color Sketch

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 (
<div>
<Sketch
style={{ marginLeft: 20 }}
color={hex}
disableAlpha={disableAlpha}
presetColors={PRESET_COLORS}
onChange={(color) => {
setHex(color.hex);
}}
/>
<button onClick={() => setDisableAlpha(!disableAlpha)}>
disableAlpha={disableAlpha.toString()}
</button>
</div>
);
}
export default Demo;
```
## Props

@@ -50,0 +91,0 @@