React Color Picker Example With Change Event

Hello Friends,

This tutorial is focused on react color picker input. This article will give you simple example of color picker button react. it's simple example of react color picker component. if you have question about react-color custom picker then i will give simple example with solution. You just need to some step to done react-color disabled.

Install Color Picker

npm install react-color --save

/src/App.js file

import React from 'react';
import './App.css';
import ButtonExample from './ButtonExample'

function App() {
  return (
    <div>
      
      <ButtonExample />

    </div>
  );
}

export default App;

/src/ButtonExample.js file

'use strict'

import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'

class ButtonExample 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 ButtonExample

I hope it can help you...