customise color picker with out any package in react

picture here is the design can we able to implement color picker like this without any packages in react

is it possible to customize a color picker like the above image with react(without any package)? I tried a lot, but cannot able to find the proper solution. if anyone can help thanks in advance.

click this image link https://i.stack.imgur.com/1RFki.png

Answer

Here is the solution for my question also you can run this solution on code sandbox.

thanks, everyone 🙂

import React, { useState } from "react";
import styled from "styled-components";
import "./styles.css";

const Container = styled.span`
  display: inline-flex;
  align-items: center;
  width: 150px;
  max-width: 150px;
  padding: 4px 12px;
  border: 1px solid #bfc9d9;
  border-radius: 4px;

  input[type="color"] {
    margin-right: 8px;
    -webkit-appearance: none;
    border: none;
    width: auto;
    height: auto;
    cursor: pointer;
    background: none;
    &::-webkit-color-swatch-wrapper {
      padding: 0;
      width: 30px;
      height: 30px;
    }
    &::-webkit-color-swatch {
      border: 1px solid #bfc9d9;
      border-radius: 50px;
      padding: 0;
    }
  }

  input[type="text"] {
    border: none;
    width: 100%;
    font-size: 14px;
  }
`;

const ColorPicker = props => {
  return (
    <Container>
      <input type="color" {...props} />
      <input type="text" {...props} />
    </Container>
  );
};

export default function App() {
  const [state, updateState] = useState("#FFFFFF");

  const handleInput = e => {
    updateState(e.target.value);
  };

  return (
    <div className="App">
      <ColorPicker onChange={handleInput} value={state} />
    </div>
  );
}