Best react color picker and how to implement it .?

We have seen color pickers in many applications, including Photoshop, Gimp, and more. We can easily add a react color picker to React Application. There are plenty of third-party libraries to add color picker components in our React project.

In this tutorial, we will learn and demonstrate some of best React color picker libraries. We’ll demonstrate two example of color picker using react-colorful and material-ui-color libraries. So let’s get started.

Best React color picker libraries options.

As we have discussed that there are plenty of third parties libraries to implement react color pickers. We’ll list here some, you can select based on your requirement.

NameDescription
react-colorfulThe react-colorful is a tiny color picker component for React and Preact apps. This is one of the most downloaded color picker libraries and has a size of about 380 kB and a weekly download of 2,771,156.

material-ui-colorCollections of color components for material-ui. This library has 256KB and a weekly download of 9,591.
react-colorThis library has 13 Different Pickers – Sketch, Photoshop, Chrome, and many more. It has a weekly download of 1,389,401 but didn’t update for one year.
react-color-paletteIt is a lightweight color picker library of a size of 47.6 kB has a weekly download of 6,170 approximate.
react-linear-gradient-pickerThis package takes any color picker for your choice And wraps it as a gradient picker. This plays well with the package angle picker, which allows your users to play with the gradient angle. It has a size of 350KB and a weekly download of 1,811.

React color picker example one using react-colorful

Step 1: Let first create our color picker project and name our project as colorPickerApp.

npx create-react-app colorPickerApp
cd colorPickerApp
npm start

Step 2: Install color picker library
We’ll demonstrate a color picker using a third-party library the react-colorful. Here we first need to install this library in our project by following the command.

npm install react-colorful

Here is a screenshot of our first example of a color picker using the react-colorful library.

react color picker example

After installing our react-colorful library and to use this library in our react project, we need to import HexColorPicker from ‘react-colorful’ library file and let add in your component. In our case we’ll add it in App.js’

React dynamic style to change background using color picker component

In our App.js file, we have used useRef hooks to get a reference to div container, so that whenever we have selected dynamic color from color-picker will change our ref div background. Whenever we change the color of HexColorPicker component we call onSetBackground() function on onChange event. In onSetBackground we apply newly selected color to our selected useRef div element to change its background.

import './App.css';
import { HexColorPicker } from "react-colorful";
import { useState, useRef } from 'react';

const myInlineCss = {
  backgroundColor: 'blue',
  padding: '12px',
  color: 'white'
}

function App() {
  const divRef = useRef(null);

  const [color, setColor] = useState('');

  function onSetBackground(selectedColor) {
    divRef.current.style.background = selectedColor;
    setColor(selectedColor);
  }

  return (
    <div style={myInlineCss} ref={divRef}>
      <h3>React color picker using react-colorful</h3>
      <HexColorPicker color={color} onChange={onSetBackground} />
      <h4>Selected color: {color}</h4>

    </div>
  );
}
export default App;

React color picker example one using material-ui-color

We’ll demonstrate color picker using third-party library material-ui-color. Here we first need to install this library in our project by following the command.

npm i material-ui-color --save

This library has the dependency on the following.

"@material-ui/core": "^4.11.2",
"material-ui-popup-state": "^1.7.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",

Here is a screenshot of our first example of the color picker component using the material-ui-color library.

React color picker example
Color picker react example

Color picker from HTML color input

We can also use regular HTML color input elements like this.

<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000" />

Conclusion
We have completed two examples of how to add a color picker to our React application. The third parties libraries provide more options for selecting colors of different formats, even we can use the HTML color input element also.

reactjs-and javascript fundamental x
reactjs-and javascript fundamental

Related posts

Spread the love

Leave a Comment

Your email address will not be published.

Scroll to Top