@jfraissenet/react-colors-picker v1.0.1

React Colors Picker Guide

Summary

You are a web developer and want, for example, to sell products with various colors. This components allows to modify your carousel pictures or to dynamically change any properties by simply clicking on the corresponding item. You just need to code your callback function.

Displays color circles

Allows callback onClick

Tunable component

Installation

How to intall it ?

npm install --save @jfraissenet/react-colors-picker

How to use it ?

import {ColorsPicker} from '@jfraissenet/react-colors-picker';

const pl=[{label:"color1", value:"#123456"},
          {label:"color2", value:"#eeeeee"},
          {label:"color3", value:"#123456"}, 
          {label:"color4", value:"#eeeeee"}]

function App() {
  return (
    <div>
      <ColorsPicker colors={pl} handle={handleOnClick}/>
    </div>
  );
}

function handleOnClick(colorItem) {
  alert(colorItem.label);
}

export default App;

label and value are mandatories.

Properties

The component is completelly tunable. It's possible to change shape, border, size of the items. You can allow the zoom when hovering over the circle or not