Breaking News: Grepper is joining You.com. Read the official announcement!

color picker in react js

Victorious Vendace answered on March 31, 2022 Popularity 10/10 Helpfulness 2/10

answer color picker in react js

related react color picker

color picker in react js

Comment

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

class ColorPicker extends React.Component {
    
    state = {
      showPicker: false,
      color: {
        r: '225',
        g: '155',
        b: '99',
        a: '2',
      },
    };
 
    onClick = () => {
        this.setState({ 
          showPicker: !this.state.showPicker 
        })
    };
 
    onClose = () => {
      this.setState({ 
        showPicker: false 
      })
    };
 
    onChange = (color) => {
        this.setState({ 
          color: color.rgb 
        })
    };
 
    render() {
 
      const styles = reactCSS({
        'default': {
          color: {
            width: '40px',
            height: '15px',
            borderRadius: '3px',
            background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
          },
          popover: {
            position: 'absolute',
            zIndex: '3',
          },
          cover: {
            position: 'fixed',
            top: '0px',
            right: '0px',
            bottom: '0px',
            left: '0px',
          },
          swatch: {
            padding: '6px',
            background: '#ffffff',
            borderRadius: '2px',
            cursor: 'pointer',
            display: 'inline-block',
            boxShadow: '0 0 0 1px rgba(0,0,0,.2)',
          },          
        },
      });
 
      return (
        <div>
          <div style={ styles.swatch } onClick={ this.onClick }>
            <div style={ styles.color } />
          </div>
          { this.state.showPicker ? <div style={ styles.popover }>
            <div style={ styles.cover } onClick={ this.onClose }/>
            <SketchPicker color={ this.state.color } onChange={ this.onChange } />
          </div> : null }
 
        </div>
      )
    }
}
 
export default ColorPicker

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.positronx.io

Tags: color-picker javascript

Link to this answer
Share Copy Link

Contributed on Mar 31 2022

Victorious Vendace

0 Answers Avg Quality 2/10

Closely Related Answers

react color picker

Comment

import React from 'react';
import { SketchPicker } from 'react-color';

class Component extends React.Component {

  render() {
    return <SketchPicker />;
  }
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: casesandberg.github.io

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 19 2022

xl chiu

0 Answers Avg Quality 2/10

color picker in react js

Contents

More Related Answers

color picker in react js

Closely Related Answers

react color picker

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.