React Color Picker Example

This React component example helps you to create a color picker. Basically, it renders an HTML color input selector and applies the selected color to the background of the page. When the user selects a new color, the handleChange method updates the state of the component with the new color value. You can integrate this example into your React project to allow users to pick colors, then you can handle the picked color according to your needs.

How to Use React Color Picker Example

First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

Create the HTML structure as follows:

<div id="app"></div>

Add the following CSS styles for the basic UI of the color picker.

html, body, #app {
  height: 100%;
width: 100%;
}

.background {
  height: 100%;
  text-align: center;
  overflow: hidden;
  position: relative;
width: 100%;
padding: 90px;
}

.title {
  color: #ffffff;
  font-family: verdana;
  text-align: center;
  margin: 0;
  padding: 30px 0;
  opacity: 0.9;
}

.color-selector {
  display: inline-block;
  margin: 0 auto;
  border-radius: 3px;
  position: relative;
  padding: 6px 32px 6px 10px;
  font-family: verdana;
  background: white;
}
.color-selector::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 5px 0 5px;
  border-color: black transparent transparent transparent;
  position: absolute;
  right: 10px;
  top: 17px;
}
.color-selector .circle {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #eee;
  margin-right: 10px;
}
.color-selector .hidden {
  position: absolute;
  left: 0;
  opacity: 0;
}
.color-selector span {
  display: inline-block;
  vertical-align: middle;
}

.overlay {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 105px;
  transition: 1s;
}
.overlay.active {
  top: calc(-50% + 105px);
  width: 160%;
  height: 160%;
  left: -30%;
}

Load the React JavaScript library by adding the following script before closing the body tag:

<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script>

Finally, add the React code to initialize the color picker.

function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}class Application extends React.Component {
  constructor(props) {
    super(props);_defineProperty(this, "handleChange",

    e => {
      this.setState({
        oldColor: this.state.color,
        color: e.target.value,
        active: !this.state.active });

    });this.state = { color: '#1569a8', active: false };}

  render() {
    return /*#__PURE__*/React.createElement("div", { className: "background", style: { background: this.state.active ? this.state.oldColor : this.state.color } }, /*#__PURE__*/
    React.createElement("div", { className: this.state.active ? 'overlay active' : 'overlay', style: { background: this.state.active ? this.state.color : this.state.oldColor } }), /*#__PURE__*/
    React.createElement("h1", { className: "title" }, "React html5 Color Input"), /*#__PURE__*/
    React.createElement("label", { className: "color-selector" }, /*#__PURE__*/
    React.createElement("span", { className: "circle", style: { background: this.state.color } }), /*#__PURE__*/
    React.createElement("span", null, this.state.color), /*#__PURE__*/
    React.createElement("input", {
      type: "color",
      value: this.state.color,
      onChange: this.handleChange,
      className: "hidden" })));

  }}


React.render( /*#__PURE__*/React.createElement(Application, null), document.getElementById('app'));

That’s all! hopefully, you have successfully integrated this code example to create a color picker. If you have any questions or suggestions, feel free to comment below.