CODEWITHSUNDEEP
javascriptreactjs
karthik
karthik

Reputation: 107

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.sstatic.net/1RFki.png https://i.sstatic.net/yloS2.png need like this design

Upvotes: 0

Views: 2154

Answers (3)

karthik
karthik

Reputation: 107

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>
  );
}

Upvotes: 2

Harsha Limaye
Harsha Limaye

Reputation: 1133

You can use html tag of type 'color' as shown here.
If that does not work for you, you are looking at writing the color picker logic yourself.

<div>
    <input type="color" id="head" name="head"
           value="#e66465">
    <label for="head">HTML 'color' input</label>
</div>

Upvotes: 1

ubaidh khatlani
ubaidh khatlani

Reputation: 102

you can use inbuilt developer tools in a browser

Upvotes: 1

Related Questions