Color Picker

import React from 'react';
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/lib/css/styles.css";

const ReactColorPaletteExample = () => {

  return <ColorPicker width={456} height={228} color={color} onChange={setColor} hideHSV dark />
}

export default ReactColorPaletteExample;

import React, { useState } from 'react';
import { Form, InputGroup } from 'react-bootstrap';

const BootstrapColorPicker = () => {
    const [color, setColor] = useState("#009B84");

  return (
    <InputGroup>
        <InputGroup.Text>
            <Form.Control
                type="color"
                id="exampleColorInput"
                title="Choose your color"
                value={color}
                onChange={e => setColor(e.target.value)}
            />
        </InputGroup.Text>
        <Form.Control type="text" value={color} />
    </InputGroup>
  );
};

export default BootstrapColorPicker;