React Example JS Color Picker Component Tutorial

In this React JS Color Picker Component Tutorial

We will learn to create a color picker in React JS application using the react-color and bootstrap CSS library.

We know very well that React is one of the best frontend development frameworks and is used for building flawless user interfaces components. For creating single-page or mobile applications, react is the best and most used option.

A color picker is a UI widget that is ideally seen in graphics apps or some websites for choosing the colors.  Color picker is best for use in adjusting color values and edit images. So, we will learn to implement a color picker in react app.

How To Create Color Picker Component In React

See and learn the below-given steps for implementing the above-mentioned

 

Step 1- Download New React Project

First of all, we download a new react app using the create-react-method which is executed in the terminal.

npx create-react-app react-color-demo

After we have installed the new app, we get into the app folder.

cd react-color-demo

 

Step 2- Set Up Bootstrap Library

Then, we will add the bootstrap package into the react js app in the following step. With the help of this library, the creation of UI components becomes swift.

npm install bootstrap

Next, we add the bootstrap CSS into the src/App.js and get the 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;

 

Step 3- Add Color Picker Package

In this step, we have to run the given command in order to add the react color picker package. Do remember to invoke the given command.

npm install react-color

 

Step 4- Build Color Picker Component

Now, there is a need to create a color picker component for adding a color picker. Hence, we create src/components folder. Afterward, create the ColorPicker.js file.

Thereafter, we 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

 

Step 5- Update Color Picker Component In App JS

Next, we need to update the color picker component by adding it to the app js file. After doing this, it will be available globally. So, 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;

 

Step 6- Start React App

So finally, we become successful in developing the react component. We just need to do the last thing. Type the given command on the terminal and execute it for starting the application.

npm start

 

Summary

So, friends, we reach the end of this tutorial. We have hopefully learned to integrate the color picker component in the react js app. We have done it step by step through a third-party package.

Thanks