React Color Picker Tutorial Example : In this instructional exercise, you will figure out how to execute color picker in React JS applications.

You more likely than not seen in many web and applications that you can pick the shading straightforwardly on color picker. You need to add basic color picker to your React JS application. So in this instructional exercise you will get bit by bit guide. With the assistance of which you can add your React JS application basic color picker.

Live demo : See here

Create Color Picker in React :

  • Step 1 – Create React App
  • Step 2 – Add Bootstrap Library
  • Step 3 – Add Color Picker Library
  • Step 4 – Create Color Picker Component
  • Step 5 – Add Color Picker Component in App.js

Step 1 – Create React App :

npx create-react-app my-colorpicker-app

Run app now:

npm start

Go to URL: localhost:3000

Step 2 – Add Bootstrap Library :

Install bootstrap:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <h2>How to create color picker in React</h2>
    </div>
  );
}
 
export default App;

Step 3 – Add Color Picker Library :

npm install react-color --save

Step 4 – Create Color Picker Component :

Make ColorPickerComponent.js document. Along these lines, visit the src directory of your application and make a table component document named ColorPickerComponent.js. What’s more, add the accompanying code into it :

'use strict'
 
import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'
 
class ColorPickerComponent extends React.Component {
    state = {
      displayColorPicker: false,
      color: {
        r: '241',
        g: '112',
        b: '19',
        a: '1',
      },
    };
 
    handleClick = () => {
      this.setState({ displayColorPicker: !this.state.displayColorPicker })
    };
 
    handleClose = () => {
      this.setState({ displayColorPicker: false })
    };
 
    handleChange = (color) => {
      this.setState({ color: color.rgb })
    };
 
    render() {
 
      const styles = reactCSS({
        'default': {
          color: {
            width: '36px',
            height: '14px',
            borderRadius: '2px',
            background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
          },
          swatch: {
            padding: '5px',
            background: '#fff',
            borderRadius: '1px',
            boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
            display: 'inline-block',
            cursor: 'pointer',
          },
          popover: {
            position: 'absolute',
            zIndex: '2',
          },
          cover: {
            position: 'fixed',
            top: '0px',
            right: '0px',
            bottom: '0px',
            left: '0px',
          },
        },
      });
 
      return (
        <div>
          <div style={ styles.swatch } onClick={ this.handleClick }>
            <div style={ styles.color } />
          </div>
          { this.state.displayColorPicker ? <div style={ styles.popover }>
            <div style={ styles.cover } onClick={ this.handleClose }/>
            <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
          </div> : null }
 
        </div>
      )
    }
}
 
export default ColorPickerComponent

Step 5 – Add Color Picker Component in App.js

In this progression, you need to add ColorPickerComponent.js document in src/App.js record:

import React from 'react';
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
import ColorPickerComponent from './ColorPickerComponent'
 
function App() {  
     
  return (  
    <div className="App">  
      <ColorPickerComponent />  
    </div>  
  );  
}  
 
export default App;
Please follow and like us: