React Color Selector

Description:

react-color-selector is a very useful and easy to use color picker, no external dependency is needed for this. You can chagne theme of it's color, by simply editing css variables. One of the best featur is you can use any number of columns and rows for your color palette.

How to install?

npm i react-color-selector

Implementation

import React, {useState} from 'react';
import ColorSelector from 'react-color-selector';


const App = () => {
    let [myColor, pickedColor] = useState('');
    let picker_data = {
        col: 12,
        row: 12,
        width: 300,
        height: 250,
        view: 'both', 
        theme: 'dark',
        title:'COLORS',
        cellControl:4
    }
    return (
        ....
        <ColorSelector pallet={picker_data} selectedColor={pickedColor} />
        <p>{myColor}</>
    )
}
export default App;

react-color-selector returns a string value of hex color code like #4d0026, in this above code, myColor will have the returned hex color code

Color Selector doesn't come with any pre-defined button, so you can open or close this component on a freedom of your own button click function

Theming:

react-color-selector comes with two themes, light and dark. In your picker_data object select theme and set value either dark or light. By default it is light.

There is small css theme is needed. These primary theme concept is provided for branding purpose. It will take your projects primary color, if it has, otherwise provide a root variable for primary color

:root {
  --primary: #007bff;
}

Options

| Properties | Type | Description | Example | | ------------- | ------------- | ------------- |------------- | | col | Number | Provides number of column in color pallate | col:12| | row | Number | Creates number or rows in color pallate | row:12| | width | Number | Width of the color pallate canvas | width:300| | height | Number | Height of the color pallate canvas | width:250| | view | String | palette and sphere or you can use both | view:'both'| | theme | String | dark or light by default its light | theme:'dark'| | title | String | Any value you want as title | title:'Colors'| | cellControl | Number | If using this field, user will get controll for increasing and decreasing cell numbers | cellControl:4|

Raise an Issue

If you are facing any issue regarding installation and usage, raise your issue in Git repo.

https://github.com/devsubhajit/react-color-selector/issues