Develop Color Picker in React Js Chrome Extension | Extension Chrome React

Hi, welcome here in this video we are going to build a chrome extension using react js and we will also use react-color to add a color picker as well, so without wasting time let’s get started. The prerequisites for this project are as follows:

Node.js should be installed in your system.
Create a brand new ReactJs project. Just copy the code below:

				
					code to create reactjs project:
npx create-react-app my-app

and after it run:
cd my-app

and then install the following package:
npm i react-color

after installation run the following command to start the app:
npm run start

The brand-new React Js project should look like this:

Here is your code for the App.js file, copy the code below and paste it into your App.js file:

				
					import logo from './logo.svg';
import './App.css';
import ColorPicker from './components/ColorPicker';

function App() {
  return (
    <div className="App">
     <ColorPicker />
    </div>
  );
}

export default App;

Here is your code for the App.css file, copy the code below and paste it into your App.css file:

				
					.App{
  text-align: center;
  height: 600px;
  width: 400px;
}

After it, make a new folder in the src and name it ‘components’. In the components folder, we are going to build our component. Make a new file and name it ‘ColorPicker.jsx’ and copy the code below and paste it into ColorPicker.jsx

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



const ColorPicker = () => {

    const [displayColor, setdisplayColor] = useState(false)
    const [color, setcolor] = useState({
        r: '20',
        g: '240',
        b: '180',
        a: '1'
    })

    const handleClick = () => {
        setdisplayColor(!displayColor)
    };

    const handleClose = () => {
        setdisplayColor(false)
    }

    const handleChange = (color) => {
        setcolor(color.rgb)
    }

    const styles = reactCSS({
        'default': {
            color: {
                width: '20px',
                height: '10px',
                background: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
                cursor: 'pointer',
                padding: '10px 20px',
                marginTop: '10px',
                border: '5px solid white',
                borderRadius: '5px',
            },
            swatch: {
                display: 'inline-block',
                marginTop: '100px'
            },
            popover: {
                position: 'absolute',
                zIndex: '2',
            },
            cover: {
                position: 'fixed',
                top: '0px',
                right: '0px',
                bottom: '0px',
                left: '0px',
            },
            bg: {
                background: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
                height: '600px',
                width: '400px',
                marginTop: '-15px'
            },
            rgba: {
                background: 'white',
                marginTop: '20px',
                padding: '10px',
                fontSize: '18px'
            },
            btn: {
                cursor: 'pointer',
                padding: '10px 20px',
                marginTop: '20px',
                border: 'none',
                borderRadius: '5px',
                fontSize: '18px'
            }
        }
    })

    return (
        <>
            <div style={styles.bg}>
                <h2 style={{ color: 'white' }}>React-Chrome-Extension</h2>
                <div style={styles.swatch} onClick={handleClick}>
                    <div style={styles.color} />
                </div>
                {displayColor ? <div style={styles.popover}>
                    <div style={styles.cover} onClick={handleClose} />
                    <SketchPicker color={color} onChange={handleChange} />
                </div> : null}

                <div style={styles.rgba}>
                    rgba({color.r}, {color.g}, {color.b}, {color.a})
                </div>

                <button style={styles.btn} onClick={() => { navigator.clipboard.writeText(`rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`) }}>copy</button>

            </div>
        </>
    )
}

export default ColorPicker

After it you need to make a build of your extension, you can run the command below:

				
					npm run build

Go to your Google Chrome and go to the extension section ‘ chrome://extensions/ ‘ then click on load unpacked and then select your build folder, where you build your react extension.