react-color-picker

Color picker is a important form element, which are used in website, which has color functionality, such as e-commerce site, garments related online software. Project management software and diagram related online application.

NPM Package Link

https://www.npmjs.com/package/react-color-picker-text

Installation and Configure

npm install --save react-color-picker-text

Import the library to jsx or js file of react application

import ColorPicker from "react-color-picker-text";

Sample Code

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ColorPicker from "react-color-picker-text";
import "./styles.css";

class App extends Component {
  onColorPickerInfoChange = color => {
    console.log("Main Color Change", color);
  };

  render() {
    // change the default design of the color picker
    const styles = {
      title: "Color Picker",
      labelStyle: {
        paddingBottom: "7px",
        fontSize: "11px"
      },
      colorTextBoxStyle: {
        height: "35px",
        border: "none",
        borderBottom: "1px solid lightgray",
        paddingLeft: "35px"
      }
    };
    return (
      <ColorPicker
        onColorChange={this.onColorPickerInfoChange}
        title={styles.title}
        labelStyle={styles.labelStyle}
        colorTextBoxStyle={styles.colorTextBoxStyle}
        pickerType={"Chrome"}
        defaultColor={"#554"}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Get Color from Picker

From Picker we can get RGBA color and Hex Color pattern. We also get Hue Pattern by calling this function named onColorChange as <ColorPicker> props

<ColorPicker
        onColorChange={this.onColorPickerInfoChange} />

Then You just call the method to react class

 onColorPickerInfoChange = color => {
    console.log("Main Color Change", color);
  };

Change the Style of Textbox of Color picker within render function

const styles = {
      ......
      colorTextBoxStyle: {
        height: "35px",
        border: "none",
        borderBottom: "1px solid lightgray",
        paddingLeft: "35px"
      }
    };

Then add it to <ColorPicker > props just like that

<ColorPicker
 colorTextBoxStyle={styles.colorTextBoxStyle}
 />

Change the Style of Label and Label name of Color picker by

const styles = {
       title: "Color Picker",
      labelStyle: {
        paddingBottom: "7px",
        fontSize: "11px"
      },
};

Then add it to <ColorPicker > props just like that

<ColorPicker
 labelStyle={styles.labelStyle}
 title={styles.title}
 />

Picker Type (pickerType: )

1. Chrome,
2. Sketch,
3. Photoshop,
4. Github,
5. Twitter,
6. Swatches,
7. Compact

Change the Type just add the props to <ColorPicker >

<ColorPicker
 pickerType={"Github"}
 />

By Default This <ColorPicker /> Initial Color is Gray or #999999 Developer Can change this color by using defaultColor props in <ColorPicker>

<ColorPicker
   defaultColor={"#554"}
/>