Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
@vtaits/react-color-picker
Advanced tools
React Color Picker
Weekly downloads
Readme
This is a resurrection of package react-color-picker.
A carefully crafted color picker for React.
No images have been used in the making of this color picker :)
$ npm install @vtaits/react-color-picker
$ yarn add @vtaits/react-color-picker
index.css
import { useState } from 'react';
import { ColorPicker } from '@vtaits/react-color-picker';
import '@vtaits/react-color-picker/dist/index.css';
function App() {
const [color, setColor] = useState('red');
const onDrag = (color) => {
setColor(color);
};
return (
<div>
<ColorPicker value={color} onDrag={onDrag} />
<div style={{
background: color,
width: 100,
height: 50,
color: 'white'
}}>
{color}
</div>
</div>
);
}
You can use only the hue spectrum if that is what you need.
import { HueSpectrum } from '@vtaits/react-color-picker';
<HueSpectrum value={color} width={100}/>
You can use only the saturation spectrum if that is what you need.
import { SaturationSpectrum } from '@vtaits/react-color-picker';
<SaturationSpectrum value={color} height={400}/>
It's best if you specify a fixed size for the color picker.
Available options:
<ColorPicker value={color} saturationWidth={400} saturationHeight={500} />
<ColorPicker value={color} saturationWidth={400} saturationHeight={500} hueWidth={100}/>
You can specify any other properties on the ColorPicker
, including className
, style
, etc
The ColorPicker
will always have a css class color-picker
The ColorPicker, the HueSpectrum and the SaturationSpectrum all accept onDrag
and onChange
callbacks.
Called during the dragging operation.
Called after mouse up - when the color has been selected
FAQs
React Color Picker
The npm package @vtaits/react-color-picker receives a total of 2,692 weekly downloads. As such, @vtaits/react-color-picker popularity was classified as popular.
We found that @vtaits/react-color-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.