Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-color-picker-wheel

ahmethalac124MIT0.1.6

Color picker component for React.js using color wheel

react, react-color, react-color-picker, color, color-picker, color-wheel

readme

react-color-picker-wheel

npm version

Color picker component for React.js using color wheel

demo

Demo can be found here: https://ahmethalac.github.io/react-color-picker-wheel/

Installation

npm install react-color-picker-wheel
yarn add react-color-picker-wheel

Usage

import ColorPicker from 'react-color-picker-wheel';
// ...
return <ColorPicker
    initialColor="#FF0000"
    onChange={(color => console.log(color))}
    //Console output => { hex: "#FF0000", rgb : { r: 255, g: 0, b: 0 } , hsl : { h: 0, s: 100, l: 50 }
    size={300}
/>;

Properties

Name Type Default Value Description
initialColor Hex "#FF0000" Color to render onto color wheel. It can be hex(#ffffff) or rgb object ({r:0, g:0, b:0})
onChange func ()=>{} Function which will be called when color change occurs. Function parameter is a color object
size number 100 Size of the container in pixels (Container is a square)

changelog

Change Log

[0.1.6] - 2020-09-14

  • bug fix :: appearance on Safari browser corrected

[0.1.3] - 2020-09-12

  • bug fix :: levelbars' appearance on Firefox corrected

[0.1.2] - 2020-09-12

  • bug fix :: demo gif can be seen on npm page now

[0.1.1] - 2020-09-12

  • bug fix :: levelbars are visible on Firefox now
  • bug fix :: color wheel is visible on Safari now
  • README :: demo gif added, color object explained

[0.1.0] - 2020-09-08

  • initial :: initial package publish