DEV Community

Sohail Khan
Sohail Khan

Posted on

A Better React Color Picker: Why I Switched to Chroma Panel

#frontend #javascript #react #ui

Finding a good React color picker is harder than it should be.

If you search for one right now, you mostly find the same old packages. They work, but they are very basic. Most of them just give you a simple box to pick a color.

But what if you need more? Sometimes your users need to pick colors from an image, use a color wheel, or choose from a custom brand palette. Building these extra features yourself takes a lot of time.

Recently, I found a new npm package called Chroma Panel. It solves all these problems. Here is why I started using it in my React projects instead of the older libraries.

More Than Just a Basic Picker

Chroma Panel gives you a lot of advanced tools right out of the box. You do not have to write custom code to get them working.

Here are the main features it includes:

  • Color Wheel: A nice, smooth circle to pick exact colors.
  • Sliders: Easy sliders to change hue, saturation, lightness, and transparency.
  • Image Picker: Users can upload an image and pick a color straight from the picture.
  • Palettes: You can set up custom color swatches for your users to pick from.
  • Pencil Mode: A drawing tool feature.
  • Custom Modes: You can change the layout to fit exactly what your app needs.

Amazing Documentation (Like Shadcn UI)

My favorite thing about Chroma Panel is the documentation.

We all hate when a package has bad docs. But the Chroma Panel website looks and feels like modern docs, very similar to Shadcn UI or Base UI.

They explain everything in plain English. You get:

  • Clear, step-by-step guides on how to install it.
  • Code examples that you can just copy and paste.
  • Details on how to use their custom React hooks.
  • Examples of how to set up every single feature.

How to Set It Up

It is very easy to use. First, install the package in your terminal:

npm install chroma-panel
Enter fullscreen mode Exit fullscreen mode

Then, you just bring it into your React component. Here is a simple example to show how it works:

import { useState } from "react";
import { ChromaPanel } from "chroma-panel";


export default function MyColorPicker() {
  const [myColor, setMyColor] = useState("#ff0000");

  return (
    <div>
      <h3>Pick a Color</h3>

      <ChromaPanel 
        color={myColor} 
        onChange={(newColor) => setMyColor(newColor.hex)} 
      />

      <p>The hex code is: {myColor}</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

That is all you need to get a great-looking color picker on your screen.

Try It Out

If you are starting a new React project, or if you want to replace an old, boring color picker, you should check this one out. It saves a lot of time and makes your app look much better.

You can learn more about it at these links:

Let me know in the comments what color picker you normally use!

Top comments (0)