React Color Picker Tutorial Example

React color picker example; In this tutorial, you will learn how to implement color picker in react js apps.

You must have seen in many web and apps that you can pick the color directly on color picker. You want to add simple color picker to your react app. So in this tutorial you will get step by step guide. With the help of which you can add your react js app simple color picker.

Create Color Picker in React

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

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Bootstrap Library

In this step, execute the following command to install Bootstrap library into your react app:

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 – Install Color Picker Library

In this step, execute the following command to install color picker library into your react app:

npm install react-color --save

Step 4 – Create Color Picker Component

Create ColorPickerComponent.js file. So, visit the src directory of your react js app and create a table component file named ColorPickerComponent.js. And add the following 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 step, you need to add ColorPickerComponent.js file in src/App.js file:

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;

Conclusion

React color picker example; In this tutorial, you have learned how to implement color picker in react js apps.

Recommended React JS Posts