https://github.com/siamahnaf/react-color-pick
An easy to use canva style react color picker tool.
https://github.com/siamahnaf/react-color-pick
canva-style-color-picker color-picker-component color-selector-react modern-color-picker-react react-color-input react-color-palette react-color-picker react-design-tools react-eyedropper-tool ui-color-picker
Last synced: 3 months ago
JSON representation
An easy to use canva style react color picker tool.
- Host: GitHub
- URL: https://github.com/siamahnaf/react-color-pick
- Owner: siamahnaf
- Created: 2025-05-01T01:03:31.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-05-01T03:36:03.000Z (6 months ago)
- Last Synced: 2025-06-25T18:15:16.989Z (4 months ago)
- Topics: canva-style-color-picker, color-picker-component, color-selector-react, modern-color-picker-react, react-color-input, react-color-palette, react-color-picker, react-design-tools, react-eyedropper-tool, ui-color-picker
- Language: TypeScript
- Homepage: https://react-color-pick-docs.vercel.app
- Size: 248 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @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](https://react-color-pick-docs.vercel.app/)
# Installation
```bash
$ npm i @siamf/react-color-pick
```
# Usage
```javascript
"use client"
import { useState } from "react";
import { ColorPicker } from "@siamf/react-color-pick";
const Sample = () => {
const [color, setColor] = useState("#C11FB5");
return (
setColor(e)}
/>
);
};
export default Sample;
```
# Styling (CSS)
If you are not using tailwind css, import the css file-
```javascript
import "@siamf/react-color-pick/dist/index.css"
```
If you are using tailwind css-
```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](https://www.siamahnaf.com/)
- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
- LinkedIn - [https://www.linkedin.com/in/siamahnaf/](https://www.linkedin.com/in/siamahnaf/)
- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)