Color Picker by React JS and React-Color

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. React JS is the popular javascript library, which is faster than other javascript library and frameworks. So today I will give you the brief description about How to create color picker using react JS step by step.

I use create-react-app npm packages, which is boilerplate for react js, developed by facebook. If your computer does not have create-react-app npm package, please install this by following command from your terminal or cmd.

npm install -g create-react-app

After installation, you will see this message in cmd or terminal

Figure 1.1 Install Create React App npm package globally

Then Create the new Project with following command from cmd or terminal

> create-react-app react-color-picker

The output after run command on terminal or cmd .

Figure 1.2 Installation of react project locally

In Figure 1.2, just follow the suggested command provided during installation.

After successfull installation you will get the message Happy hacking at the end. you also get the basic usage command list, which will help you to operate the react application from terminal or cmd .

Installation of react-color plugins in projects

I use the react-color npm package to create simple color picker for React JS. To install the react-color , you just go to project root folder react-color-picker and then run this following command

> npm install --save react-color

This is local environment setup for develop the color picker with react js.

If you do not want to using local environment , you can use the online development tools . you can use online editor site named codesandbox.io for developing purpose. I use that online editor for this tutorial, First I give you the basic Instruction, Then give an example, how to create the color-picker with that online editor.

The link below is the online editor link, which is used for create the simple color picker.

CodeSandbox: Online Code Editor Tailored for Web Application Development

Open the CodeSandbox Online editor from your fabourite browser (such as. Chrome or Firefox) Link is (codesandbox.io). I provide full code link at the end of this article.

Figure 1.3 Open the CodeSandbox and click on Create Sandbox

In 1.3, (1) click on create Sandbox from codesandbox web application.

Figure 1.4, Create new project or sign in as github user

In Figure 1.4

(1) Click on React Project button, it will create the new project with create-react-app template.

(2) We can login with our github account and save the project into github repository also.

Simple Introduction about codesandbox online editor for react application

Figure 1.4 Primary Introduction of condsanbox.io online code editor

(1) It is a project directory structure sections. developer can create file and folder from this section.

(2) Editor Section, where developer can open file and edit code from here.

(3) Application output section,where developer can see UI update instently with hot reload feature.

(4) Main component “App” for React JS, which is in index.js file.

Modify the “App” function to “App” Class accessing the React Smart Component features

Figure 1.5, Introduction of react application and application structure in codesandbox

(1) Main class of react js application is in index.js file

(2) Change App function to React Class which has a functionality to change UI state, add custom function and event within Component. And React Class must have render method and it should be return valid virtual DOM element.

ADD COLOR DEPENDENCY TO Application

(3) Is a “Add Dependency” button, Where you can add different external library and dependency of react application by clicking on that.

Figure (1.5 (3)) show how to use add depenency sections in codesendbox

(3.1) By Clicking on Add Dependency, you see the popup serach box.

(3.2) Write react-color in serach box. it will show the color related library available for react application.

(3.3) Then select react-color library and click on it, codesendbox will automatically added this library to your application.

(4) Import the library named react and react-dom in figure 1.5, which are using for create the primary structure of the react application

(5) Import external css style file to App Component, for change the design of the files in figure 1.5.

(6) In figure 1.5, last 2 line will, find the element from “index.html” file in public folder then render the “App” Component by ReactDOM.render() function. which takes two parameter. The first parameter is React Component and second is Dom Element find form index.html file in public folder. this function will embed the “App” component with that Selector or DOM element.

Add The InputBox for Color Picker In App Component.

In index.js in root directory, I have remove some predefined code and add textbox for show color value in textbox. Here is the code for index.js file.

Figure 1.6 Add the input box for embed the color picker to input box

In Figure 1.6

(1) Select index.js file from directory sections

(2) create textbox element in render function and return as valid DOM element. TexBox Input element contains the JSX attribute which are discuss below:

(2.1) className attribute for input will take css or scss style class name .

(2.2) type and name would be sandard attribute of html input element

(3) Hot Relaod output sections will shows, there is valid textbox element in react application, If not it will shows error in output section. that text box will contains the color picker color value. When click on that textbox, color picker will appear. On focus out Color picker will hide from application.

ADD FUNCTIONALITY App.js CLASS FOR HANDLE THE COLOR PICKER BEHAVEAR

Figure 2.1: Configure state of the App component which contains the color picker

In Figure 2.1

(1) Add the Chrome Picker from react-color package. which is then using for showing the color picker during clicking on Textbox element.

(2) Add the state at constructor to App React Component class. Those state are works as describe below

displayColorPicker --> use for hide and show color picker below textbox when click on textbox
changeColor --> use for show the value in textbox and change color background of the color showing container
color --> use for fix the color picker slider color in react color

Show Color when click on Input Textbox

Figure 2.2 Introduce the color picker show functionality

In Figure 2.2,

(1) Add the function, which will use for show color picker below textbox. the function name is onHandleShowColorPicker() , which will change state of displayColorPicker to true . Then ,it will show color palette below the textbox.

(2) Using logical operator to show the <ChromePicker /> ,when displayColorPicker state is true.

(3) Output of the (1) and (2), <ChromePicker /> is showing below the textbox.

(1) Add the Wrapper between <ChromePicker /> and Textbox .

(2) Add function onHandleCloseColorPicker() to that wrapper for closing color picker, when the cursor is focus out from textbox.

(3) Add style in styles.css file for color picker palette , which will make the color palette position absolute with textbox . Using z-index: 100 , which makes palette alway top of other html element which index is less then 100, React Component Tree.

(4) It is a css design for color picker cover div, which is helps color picker to close when focus out from textbox. makes position fixed within color picker container. top:0; left:0; right:0; bottom:0; maked color-picker-cover div in center position , which will overlap the color picker palette.

(1) To show value to textbox, i have assigned changeColor state to input texbox. it will first take value from state , which is declare in constructor . when the state is change during the color picker value is changed by cursor.

(2) Add the onChangeColorPicker() function, which then fires <ChromePicker /> onChange event, which color palette cursor position is changed.

(3) Cursor for changing value by taping or clicking on color picker palette.

(4) Output of the (1), (2), (3).

(5) declaration of state change value to color showing component of DOM element.

(6) onChangePicker function implementation, which are using in (2), we are changing two state color and changeColor . changeColor state changes the textbox value. color state changes slider color value.

Label Design and Make Textbox readonly for color picker

(1) Add the Textbox style to Default Props.

Now you have question, what is default props? default props will load with component as predefiend properties.

(2) Then applying the style to Textbox element using style jsx attribute. the code is <input style={this.props.colorTextBoxStyle}/> .

(3) Output of the (1) and (2), design of the textbox for color picker.

(4) Color showing component, when user changes cursor position in color palette, it will change automatically changes the background color of color show component. Add the style jsx attribute for provide the backgorund style to Color Showing Component.

(1) readOnly makes the textbox value readonly, which will prevent the user to change color value from input TextBox.

(2) Add style to default props for design the label for color picker input. Which will then use in (3).

(3) Textbox and label element with Default Props styles and attribute.

You can get the full code from this link(codesandbox.io)