React 17 Color Picker Example

React color picker example; In this tutorial, i will provide you complete guide from scratch on how to integrate colorpicker library and implement color picker in react js apps using npm colorpicker library.

A color picker (also color chooser or color tool) is a graphical user interface widget, usually found within graphics software or online, used to select colors and sometimes to create color schemes.

Implement Color Picker in React Apps

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

Step 1 – Create React App

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 Package

Execute the following command to install Bootstrap library into your react app:

npm install bootstrap --save

Import 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 Package

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 – Import Color Picker Component in App.js

Import 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 integrate color picker library and implement color picker in react js apps.

Recommended React JS Posts