Author avatar

Vivek Kumar

Handling Font Color of ReactJS Element

Vivek Kumar

  • Sep 16, 2019
  • 8 Min read
  • 21 Views
  • Sep 16, 2019
  • 8 Min read
  • 21 Views
Web Development
React

Introduction

The elements that are generated in the ReactJS framework are capable of possessing a wide range of transition properties. The availability of a large variety of props and style components makes it a lot easier for you to work on a React element in comparison to any other framework existing for the job.

It is true that there are several critical steps involved in the creation of a ReactJS element, from the basic skeleton in HTML to the designing and animation style in CSS. There are many important layers involved in the creation of the ultimate transition product that may seem to be insignificant initially but play an imperative part in the overall scheme of things. One such layer is the accessibility to the correct font color in a ReactJS element to attain the desired style and transition effects.

The selection of the right font color while creating the optimum ReactJS element is one of the steps that most of the people tend to overlook. It is significant to understand that it’s not just about what you create but also what it looks like that defines its final utility. It is not merely the flashy and moving animation that captures the attention of the targeted audience but the color of the text that captures the eyes of the audience that matters. That is the reason why the amount of effort that you put into the selection of the right font can eventually make or break the objective with which the final transition element has been created.

Now, one of the key purposes of this guide is to help you learn the best way by which you can get font color in a ReactJS element and utilize it smartly to make your transition come alive. We are also going to focus on getting the component API color, as well as the font color for the parent component and the helper component. Along with the description, we are also going to carefully look for the key commands that can help you fetch the desired font colors.

Getting Started

Installation

One can simply install react-color through the npm package manager working for the JS programming language. It is going to look like the following:

1
npm install react-color --save

Including a Component

You are required to import color picker via react-color at the top of a component and, thereafter, apply it in the render function.

1
2
3
4
5
6
7
8
9
import React from 'react';
import { SketchPicker } from 'react-color';

class Component extends React.Component {

  render() {
    return <SketchPicker />;
  }
}
jsx

Component Application Programming Interface (API) for Color

The component API is helpful in finding which color is currently active on the color picker. With the help of the same, you can start the color picker in terms of a particular color order or keep it in synchronization with the state of the parent component.

The color basically accepts either string of hex color #985 or an object of hsl or rgb values { h: 0, s: 2, l: .10 } or { r: 241, g: 124, b: 151 }. The commands associated with the component API are described below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import { SketchPicker } from 'react-color';

class Component extends React.Component {
  state = {
    background: '#fff',
  };

  handleChangeComplete = (color) => {
    this.setState({ background: color.hex });
  };

  render() {
    return (
      <SketchPicker
        color={ this.state.background }
        onChangeComplete={ this.handleChangeComplete }
      />
    );
  }
}
jsx

If the color picker starts with the color #fff and, if the color is changed, then handleChangeComplete is going to fire a new set of colors to the state.

onChange

Note that every time the color is changed, a function is passed to the call. It is applied to store the color in the state of the parent component or when building other transformations. These are, basically, drag events that happen occasionally. If your objective is to apply color only once then it is suggested to use onChangeComplete.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from 'react';
import { SwatchesPicker } from 'react-color';

class Component extends React.Component {

  handleChange(color, event) {
    // color = {
    //   hex: '#985',
    //   rgb: {
    //     r: 241,
    //     g: 124,
    //     b: 151,
    //     a: 1,
    //   },
    //   hsl: {
    //     h: 0,
    //     s: 2,
    //     l: .10,
    //     a: 1,
    //   },
    // }
  }

  render() {
    return <SwatchesPicker onChange={ this.handleChange } />;
  }
}
jsx

onChangeComplete

Once a color change is done, pass a function to call.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import { PhotoshopPicker } from 'react-color';

class Component extends React.Component {
  state = {
    background: '#fff',
  };

  handleChangeComplete = (color, event) => {
    this.setState({ background: color.hex });
  };

  render() {
    return <PhotoshopPicker onChangeComplete={ this.handleChangeComplete } />;
  }
}
jsx

Creating Your Own Parent Component

In order to create a custom color picker, you need to form a paramount component that can play the part of a bridge with the high order component termed CustomPicker. All you are required is wrap up the export with the CustomPicker function.

1
2
3
4
5
6
7
8
9
10
import React from 'react';
import { CustomPicker } from 'react-color';

class MyColorPicker extends React.Component {
  render() {
    return <div>MyColorPicker</div>;
  }
}

export default CustomPicker(MyColorPicker);
jsx

The parent component is going to pass hex, hsl, and rgb values in the form of props meant for the present color. It also renders an onCharge prop that can be used to augment a new color. It is best to pass it in the form of a hex string, hsl, or rgb object.

Helper Components

There are various helper components which can be accessed from here. I detail two of these helper components below.

1. The <Saturation /> Component

The <Saturation /> component applies color saturation in order to showcase a saturation block that you can drag to the change value. Ensure that you wrap in the div for the specific size that you wish the block to be, apart from safeguarding the fact that it’s position: relative.

  • ….this.props: Transfers down all color props from the topmost component.
  • onChange: For function callbacks. Make sure that it calls the onChange function concerning the parent and brings a change to it.
  • pointer - Defines a custom pointer component for the slider pointer.
1
2
3
4
5
6
var { Saturation } = require('react-color/lib/components/common');

<Saturation
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange }  />
jsx

2. The <Alpha /> Component

Apply Alpha to display a slider to toggle the alpha value. Make sure to wrap it in a div that's the size you want the slider to be and that it is position: relative.

  • ...this.props - Passes down all the color props from your top-most component.
  • pointer - Defines a custom pointer component for the slider pointer.
  • onChange - Function callbacks. Make sure this calls the onChange function of the parent to make it change.
1
2
3
4
5
6
var { Alpha } = require('react-color/lib/components/common');

<Alpha
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange } />
jsx

Conclusion

It is quite obvious that font colors are generally underrated when it comes to their significance in rendering the best React output. Having an in-depth understanding of which color to use and where to use it can take your transition to a whole new level. It is the power of the font color that we discussed in this guide, as well as how to access font color right from the installation to the component API for color. We also discussed the creation of our own parent component in this regard and how to handle the font color saturation and alpha in an effective way.

Reference

You can refer the following resource which is also used as a reference for this guide:

0