React Color Picker Tutorial Example

Create an HTML element for the color picker in the component, and use the React color picker function to apply colors in React JS applications, In this tutorial, you will learn how to create a color picker in React JS apps using npm install react-color.

How to Create Color Picker in React js Application

Steps to create color picker in react js application:

Step 1 – Create React App

Run the following command on your cmd 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

Run the following command to install the 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

Run 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 in the src directory, and add color picker code in 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