@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

Stay in touch

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