How to Create Color Picker in React Js using React Color

A color picker is a virtual tool that is used for choosing the colors for visual elements. In this React js color picker tutorial, you will learn how to create and integrate color picker in React js application using the React color package.

You will be shown how to build a color picker button in react; after clicking on the color picker button, a popover will appear having color picker options from where you can choose a color with hex and RGBA values.

Everything we cover in this react color picker component example will be helpful for you. We will give you valuable instructions to create a custom color picker in react; make sure to assimilate every instance or instruction to create the desired functionality.

React Js Color Picker Component Example

  • Step 1: Create React Js App
  • Step 2: Install React Color Picker Package
  • Step 3: Implement Color Picker in React
  • Step 4: Register Color Picker Component
  • Step 5: Run Development Server

Create React Js App

Whichever, machine you are working on, must install node and npm tools globally on your development machine. It is a foundational tool for modern web development.

Once the suggested tools installed appropriately, type the given below command and hit enter to commence the new react app installation.

npx create-react-app react-demo

Install React Color Picker Package

To work with color picker in react, you have to install the react color package.

Hence in the given below command from the terminal and start installing the library.

npm i react-color

Implement Color Picker in React

Next, you require to import SketchPicker from ‘react-color’ and reactCSS from ‘reactcss’ packages, then you need to define couple of funtions to setup a color picker in react.

You need to add the code in components/ColorPickerComponent.js file.

import React from 'react'
import { SketchPicker } from 'react-color'
import reactCSS from 'reactcss'


class ColorPickerComponent extends React.Component {
    
    state = {
      displayClrPkr: false,
      color: {
        r: '215',
        g: '159',
        b: '55',
        a: '1',
      },
    };
 
    onClick = () => {
        this.setState({ 
          displayClrPkr: !this.state.displayClrPkr 
        })
    };
 
    stateClose = () => {
      this.setState({ 
        displayClrPkr: false 
      })
    };
 
    onChange = (color) => {
        this.setState({ 
          color: color.rgb 
        })
    };
 
    render() {
 
      const styles = reactCSS({
        'default': {
          color: {
            width: '50px',
            height: '20px',
            borderRadius: '4px',
            background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
          },
          popover: {
            position: 'absolute',
            zIndex: '2',
          },
          cover: {
            top: '0px',
            right: '0px',
            bottom: '0px',
            left: '0px',
            position: 'fixed',            
          },
          swatch: {
            padding: '5px',
            background: '#ffffff',
            borderRadius: '3px',
            cursor: 'pointer',
            display: 'inline-block',
            boxShadow: '0 0 0 2px rgba(0,0,0,.3)',
          },          
        },
      });
 
      return (
        <div>
          <div style={ styles.swatch } onClick={ this.onClick }>
            <div style={ styles.color } />
          </div>
          { this.state.displayClrPkr ? <div style={ styles.popover }>
            <div style={ styles.cover } onClick={ this.stateClose }/>
            <SketchPicker color={ this.state.color } onChange={ this.onChange } />
          </div> : null }
 
        </div>
      )
    }
}
 
export default ColorPickerComponent

Register Color Picker Component

In this section, you have to go to main App.js file and register the ColorPickerComponent as suggested given below.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import ColorPickerComponent from './components/ColorPickerComponent'


function App() {
  return (
    <div className="App">
        <ColorPickerComponent/>  
    </div>
  );
}
 
export default App;

Run Development Server

In the last step, you need to start the react development server, you can start it by simple npm start command.

npm start

App can be tested by the suggested url.

http://localhost:3000

How to Create Color Picker in React Js using React Color

Conclusion

In this tutorial, we have focused on how to add a color picker in react js application. We started from scratch and covered every point from absolute starting.

We have ended up building a color picker component in react, hope it will help you.