Author avatar

Vivek Kumar

Generating Inline Font-size Style Using ReactJS

Vivek Kumar

  • Jun 18, 2019
  • 6 Min read
  • 1,354 Views
  • Jun 18, 2019
  • 6 Min read
  • 1,354 Views
Web Development
React

Introduction

The animators and programmers who have spent some time in the industry will be well aware of the fact that React component is one of the formidable platforms. One of the key reasons for that is the implementation of a browser independent Document Object Model (DOM) system in order to ensure performance as well as cross-browser compatibility.

In this guide, our objective is to go through the DOM properties and see the ways of generating inline font-size style with React JS.

DOM Elements

When, as a developer, you are working with the React JS, it is critical to understand that all DOM attributes and properties should be in camelCased. The event handlers are also not an exception to it. For instance, an HTML attribute like tabindex corresponds to the tabindex attribute in React. Here, the exception is aria-* as well as data-* attributes. These attributes should be in lowercase.

While generating inline font size style using React, there are multiple attributes that operate in a different fashion in between HTML and React.

The checked Attribute

checked is an attribute upheld by <input> elements of type checkbox and/ or radio. You can apply it in order to set if the component has been checked. The step is helpful in constructing controlled components. Here,defaultChecked, a form of uncontrolled equivalent, decides whether a component is checked at the time when first mounted or not.

The className Attribute

In order to identify a specific CSS class, apply the className attribute. It applies to all types of standard Document Object Model and Scalable Vector Graphics (SVG) components, such as <div>, <a>, etc. If, as a user, you apply React with the Web elements, then it is advisable to go for the class attribute.

The dangerouslySetInnerHTML Attribute

The dangerouslySetInnerHTML attribute is used as a replacement for React’s innerHTML while using the browser Document Object Model (DOM). When we talk in standard terms, setting HTML from code is kind of risky due to the fact that it simply exposes users to a kind of cross-site scripting (XSS) attack. Under such circumstances, the user can set the concerned HTML straight from React JS. Here, it is critical for the user to type in dangerouslySetInnerHTML and then pass on an object via a __html key.

Let's understand this with the help of the following example:

1
2
3
4
5
6
7
function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML = {createMarkup()} />;
}
javascript

The htmlFor Attribute

As for is basically reserved for JavaScript, the elements of React JS rather apply htmlFor.

The onChange Attribute

The event responds as the user anticipates it to be, i.e. the event is triggered whenever a form field is altered. The user will voluntarily apply their current browser behavior because onChange is a form of incongruity and its responsiveness, as well as ReactJS, depends on an event to improvise the user input on a real-time basis.

The selected Attribute

Do note that the selected attribute is supported via <option> elements. The application of this attribute is usually done to set the component to a chosen or not chosen state. It is very effective in order to create controlled elements.

The style Attribute

Some of the leading examples and documentation apply styles in order to achieve convenience, but it is worth mentioning that the application of the style attribute as one of the key methods of styling the elements is not suggested.

In the maximum number of cases, the classname is recommended to be applied as an external form of CSS stylesheet. The style component is generally applied in React apps to include dynamic computer animated styles at the stipulated rendered time.

In general working proportions, style accepts a JS object carrying camelCased features instead of a CSS string. This feature is persistent with the Document Object Model form of style for a JS property. It is more effective and prevents loopholes in XSS security measures. For instance:

1
2
3
4
5
6
7
8
const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style = { divStyle } > Hello World! </ div>;
}
javascript

You should be familiar with the fact that the styles are not auto-prefixed. In order to support browsers with older versions, one is required to render the following style features:

1
2
3
4
5
6
7
8
const divStyle = {
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

function ComponentWithTransition() {
  return < div style = { divStyle } > This should work cross-browser </ div>;
}
javascript

Here, the style keys are camelCased to be consistent with admission to the properties of DOM nodes from JavaScript (for example, node.style.backgroundImage). Vendor prefixes, other than ms, should begin with a capital letter. This is the reason why WebkitTransition has an uppercase W.

The React component will spontaneously append the px suffix in order to ascertain inline numeric style features. As a user, if your priority is applying units apart from px, then it is advisable to specify a value in the form of a string comprising the desired unit results.

For example:

1
2
3
4
5
6
7
8
9
// Result style: '10px'
<div style = {{ height: 10 }} >
  Hello World!
</ div>

// Result style: '10%'
<div style = {{ height: '10%' }} >
  Hello World!
</ div>
html

Conclusion

In this guide, you've learned several DOM elements which help in improvising the style keys in the correct manner to attain the desired results for the inline font size styling.

References

While writing this guide, the following resource has been referred to:

0