Socket
Socket
Sign inDemoInstall

@vtaits/react-color-picker

Package Overview
Dependencies
8
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vtaits/react-color-picker

React Color Picker


Version published
Maintainers
1
Weekly downloads
3,290
decreased by-10.04%

Weekly downloads

Readme

Source

NPM dependencies status

React Color Picker

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 :)

Color Picker

Examples

  • Simple

Install

npm
$ npm install @vtaits/react-color-picker
yarn
$ yarn add @vtaits/react-color-picker
Please don't forget to include the styles!!! - 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>
  );
}

HueSpectrum

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}/>

SaturationSpectrum

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}/>

Properties

It's best if you specify a fixed size for the color picker.

Available options:

  • saturationWidth
  • saturationHeight
  • hueWidth
  • hueHeight (defaults to saturationHeight)
<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.

onDrag(colorString)

Called during the dragging operation.

onChange(colorString)

Called after mouse up - when the color has been selected

License

MIT

Keywords

FAQs

Last updated on 03 Nov 2023

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc