React Js Color Picker Component Tutorial Example

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

Summary

Throughout this guide, we have learned how to integrate color picker in the react js app step by step. Moreover, we carefully went through every instruction to add a color picker in the react app through a third-party package.