React Js Color Picker Component Tutorial Example

Last updated on: August 10, 2021 by Editorial Team

React Js Color picker tutorial; React is one the best frontend development framework best used for building flawless user interfaces components.

React is best for creating single-page or mobile applications; ui modules are knowns as components in React. Components are used to render specific elements in the Dom with the help of React DOM library.

Today, this React color picker example will help you learn how to create a color picker in React js application using the react-color and bootstrap CSS library.

A color picker is a ui widget, ideally seen in graphics apps, some websites for choosing colors. Seldom is used for generating color palettes; a color picker is best used to adjust color values and edit images. In this tutorial, we will show you how to implement a color picker in a react app.

How to Create React Color Picker Component

Step 1: Download React App
Step 2: Set Up Bootstrap Library
Step 3: Add Color Picker Package
Step 4: Build Color Picker Component
Step 5: Update Color Picker Component in App Js
Step 6: Start React App

Download New React Project

You can download a new react app using the create-react-app method which is executed in the terminal.

npx create-react-app react-blog

New app has been installed, next get into the app folder.

cd react-blog

Set Up Bootstrap Library

In the subsequent step, we will add the bootstrap package into the react js app. This library will allow creating of ui components swiftly.

npm install bootstrap

Further, we have to add the bootstrap CSS into the src/App.js and get authority to use bootstrap in react.

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 
function App() {
  return (
    <div>
      <h2>Integrate Color Picker in React Js</h2>
    </div>
  );
}
 
export default App;

Add Color Picker Package

Next, you have to run the command to add the react color picker package; make sure to invoke the given below command.

npm install react-color

Build Color Picker Component

Now, to add a color picker you need to create an color picker component, hence create src/components folder then create the ColorPicker.js file.

Thereafter, upload src/components/ColorPicker.js file.

import React from 'react'

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


class ColorPicker extends React.Component {
    
    state = {
      showPicker: false,
      color: {
        r: '225',
        g: '155',
        b: '99',
        a: '2',
      },
    };
 
    onClick = () => {
        this.setState({ 
          showPicker: !this.state.showPicker 
        })
    };
 
    onClose = () => {
      this.setState({ 
        showPicker: false 
      })
    };
 
    onChange = (color) => {
        this.setState({ 
          color: color.rgb 
        })
    };
 
    render() {
 
      const styles = reactCSS({
        'default': {
          color: {
            width: '40px',
            height: '15px',
            borderRadius: '3px',
            background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
          },
          popover: {
            position: 'absolute',
            zIndex: '3',
          },
          cover: {
            position: 'fixed',
            top: '0px',
            right: '0px',
            bottom: '0px',
            left: '0px',
          },
          swatch: {
            padding: '6px',
            background: '#ffffff',
            borderRadius: '2px',
            cursor: 'pointer',
            display: 'inline-block',
            boxShadow: '0 0 0 1px rgba(0,0,0,.2)',
          },          
        },
      });
 
      return (
        <div>
          <div style={ styles.swatch } onClick={ this.onClick }>
            <div style={ styles.color } />
          </div>
          { this.state.showPicker ? <div style={ styles.popover }>
            <div style={ styles.cover } onClick={ this.onClose }/>
            <SketchPicker color={ this.state.color } onChange={ this.onChange } />
          </div> : null }
 
        </div>
      )
    }
}
 
export default ColorPicker

Update Color Picker Component in App Js

Now, you have to update the color picker component; it has to be added in the app js file; after that it will be available globally, hence insert the color picker component in the src/App.Js file.

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import ColorPicker from './components/ColorPicker'


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

Start React App

The React component has been successfully developed, you have to take one more step, just type the provided command on the terminal and execute it to start the application.

npm start