Socket
Socket
Sign inDemoInstall

@uiw/react-color-wheel

Package Overview
Dependencies
Maintainers
2
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 2.0.3 to 2.0.4

6

package.json
{
"name": "@uiw/react-color-wheel",
"version": "2.0.3",
"version": "2.0.4",
"description": "Color wheel",

@@ -39,4 +39,4 @@ "author": "Kenny Wong <wowohoo@qq.com>",

"dependencies": {
"@uiw/color-convert": "2.0.3",
"@uiw/react-drag-event-interactive": "2.0.3"
"@uiw/color-convert": "2.0.4",
"@uiw/react-drag-event-interactive": "2.0.4"
},

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

@@ -31,3 +31,3 @@ React Color Wheel

<Wheel color={hsva} onChange={(color) => setHsva({ ...hsva, ...color.hsva })} />
<div style={{ width: '100%', height: 34, background: hsvaToHex(hsva) }}></div>
<div style={{ width: '100%', height: 34, marginTop: 20, background: hsvaToHex(hsva) }}></div>
</Fragment>

@@ -66,2 +66,29 @@ );

```tsx mdx:preview
import React, { useState, Fragment } from 'react';
import Wheel from '@uiw/react-color-wheel';
import ShadeSlider from '@uiw/react-color-shade-slider';
import { hsvaToHex } from '@uiw/color-convert';
function Demo() {
const [hsva, setHsva] = useState({ h: 214, s: 43, v: 90, a: 1 });
return (
<Fragment>
<Wheel color={hsva} onChange={(color) => setHsva({ ...hsva, ...color.hsva })} />
<ShadeSlider
hsva={hsva}
style={{ width: 210, marginTop: 20 }}
onChange={(newShade) => {
setHsva({ ...hsva, ...newShade });
}}
/>
<div style={{ width: '100%', height: 34, marginTop: 20, background: hsvaToHex(hsva) }}></div>
</Fragment>
);
}
export default Demo;
```
## Props

@@ -68,0 +95,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc