@siamf/react-color-pick

An easy to use canva style react color picker tool.

• Highly customizable
• Easy to use
• Tailwind and non-tailwind support

Demo

See the live demo from here

Installation

$ npm i @siamf/react-color-pick

Usage

"use client"
import { useState } from "react";
import { ColorPicker } from "@siamf/react-color-pick";

const Sample = () => {
    const [color, setColor] = useState<string>("#C11FB5");

    return (
        <div>
            <ColorPicker
                value={color}
                onChange={(e) => setColor(e)}
            />
        </div>
    );
};

export default Sample;

Styling (CSS)

If you are not using tailwind css, import the css file-

import "@siamf/react-color-pick/dist/index.css"

If you are using tailwind css-

@source "../../node_modules/@siamf/react-color-pick"; 

//Adjust the package path if need

Available props

Name	Description	Type	Default/Required
value	Default Color Value	string	optional
onChange	Watch color change	(color:string) => void	optional
className	Main Container className	string	optional
selectorClassName	Color selector gradient box className	string	optional
selectorDotClassName	Color selector dot className	string	optional
hueClassName	Hue slider bar className	string	optional
hueSliderClassName	Hue slider dot className	string	optional
colorPreviewClassName	Color preview circle className	string	optional
colorInputClassName	Color input field className	string	optional
eyeDropClassName	Eye drop button className	string	optional

Stay in touch

• Author - Siam Ahnaf
• Website - https://www.siamahnaf.com/
• LinkedIn - https://www.linkedin.com/in/siamahnaf/
• Github - https://github.com/siamahnaf