Author avatar

Vivek Kumar

Prefixing Flexbox Styles for React

Vivek Kumar

  • Aug 2, 2019
  • 7 Min read
  • 13 Views
  • Aug 2, 2019
  • 7 Min read
  • 13 Views
Web Development
React

Introduction

You might have heard people saying that when you are working in a React project then there is nothing much for you to worry about. That is because React comes with its own style libraries and additional props to take care of your every need. All you are required to do is get familiar with them and they are going to take care of the rest.

Yes, they are right to a certain extent! But, deep within these library components, there are ascertained methods that are rarely put in use, maybe because you are not aware of how powerful they are. For example, there are many ways by which you can attain topic prefixing in React, but which one is the correct approach? And how can you implement that approach? These are things that are necessary to understand. Our objective has always been preferring the styles that are easier to use, takes less rendering and storage space, yet delivers the results without compromising with the quality.

In this guide, we are going to learn about one such style in React where topic prefixing can be easily accomplished yet the results are reliably stable and compatible with almost every medium used online. Here, we are going to learn about Flexbox styles for topic prefixing for React. We'll learn about the installation process and usage of the React Prefixer along with how it can be successfully attained in Flexbox. In addition to that, we are also going to learn about the testing environment and browser support.

React Prefixer: Definition and Process

In layman’s terms, React Prefixer is basically a tiny package that is designed to render vendor-specific prefixes for the style components that you apply in React projects.

The Installation

The process of installing the prefixer is quite simple. A standard one-liner command will do it for you.

1
npm install react-prefixer

The application of the prefixer can be done with the help of the below commands:

1
2
3
4
5
6
7
import prefix from 'react-prefixer';
 
const styles = prefix({
  userSelect: 'none'
});
  
console.log(styles); // {WebkitUserSelect:"none"}
javascript

Apart from the surface styling, if you are interested, prefixing the deeply nested objects can also be accomplished right here. The commands for the deep styling is given below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import prefix from 'react-prefixer';
 
const styles = prefix({
  some:{
    really:{
      deep:{
        style:{
          userSelect: 'none'
        }
      }
    }
  }
});
    
console.log(styles); // {some:{really:{deep:{style:{WebkitUserSelect:"none"}}}}}
javascript

The Prefixing in the Flexbox Styles for React

You can easily do the latest vendor syntax or the tweener for the Flexbox styling. All you are required to do is simply import the prefix from the react-prefixer and proceed with the following commands:

1
2
3
4
5
6
7
8
9
import prefix from 'react-prefixer';
 
const styles = prefix({
  display: 'flex'
});
    
console.log(styles); 
// {display: '-webkit-flex'}, if on Safari
// {display: '-ms-flexbox'}, if on IE10
javascript

Sometimes, an issue is raised with the application of the Flexbox for the topic prefixing. While applying React in order to style an object, one normally would be able to prefix certain values and not the properties. That is the reason why users are unable to incorporate many styles simultaneously. Well, the bad news is that it is a problem that occurs frequently with people during the process; but the good news is that there is a dependable solution to it.

It is basically a small XSS trick that you normally don’t find in the books but it is going to certainly help you to find the exact solution. In your React CSS, just add a small function, as shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var divStyle = multipleValues({
  color: 'white',
  padding: '10px 20px',
  // if you want property to have multiple values
  // just write them all in the array
  display: [
    '-webkit-box',
    '-webkit-flex',
    '-ms-flexbox',
    'flex'
  ],
  background: ['red', 'blue'],

  extraStyles: {
    background: [ 'yellow', 'pink' ]
  }
});
javascript

The function which is involved is, itself, quite genuine and simple:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// function that will do a "magic" XSS-ish trick
function multipleValues(style) {
  var result = {};
  // feel free to replace for..in+hasOwnProperty with for..of
  for (var key in style) { 
    if (style.hasOwnProperty(key)) {
      var value = style[key];
      if (Array.isArray(value)) {
        // by adding semicolon at the begging we applying
        // a trick that ofthen used in XSS attacks
        result[key] = ';' + key + ':' + value.join(';' + key + ':');
      } else if (typeof value === "object" && value !== null) {
        // here we doing recursion
        result[key] = multipleValues(value);
      } else {
        // and here we simply copying everything else
        result[key] = value;
      }
    }
  }
  return result;
}
javascript

The best thing about the XSS application is that there is not going to be any sort of prevailing security issue and the compatibility with the React CSS is going to be seamless.

The Testing Environment

The topic prefixing with Flexbox styles for React is required to run through a few tests in order to ensure compatibility and efficiency. In a ReactJS document object model (DOM), when getComputedStyle method is implemented to calculate the prefix, it is going to return a vacant array of styles.

If your objective is to perform tests on the grounds of a particular browser prefix, then you are required to mock getComputedStyle while working on window. The example of running such a test with the browser is highlighted below:

1
2
3
4
5
6
7
8
9
const originalGetComputedStyle = window.getComputedStyle;
 
window.getComputedStyle = function(...args) {
  if (arguments[0] === document.documentElement) {
    return ['-webkit-appearance'];
  }
 
  return originalGetComputedStyle.apply(window, args);
};
javascript

The Browser Support

The browsers on which you are conducting the Flexbox styles are very important, in terms of the results that you get. Now, if you going to apply the method mentioned in this guide to get the results then it is advisable that you use Internet Explorer (IE) 10+ and Edge, Google Chrome, Firefox, Opera, and Safari. Simply put, it is going to be compatible with all the important and popularly known browsers on the Internet.

Conclusion

Working upon the topic prefixing in Flexbox styles for React is going to be a hell of a lot easier once you apply the approach explained here. It is because this guide has properly explained the installation and usability of the prefixing component and how to make the right use of Flexbox styles to make things work better for you. We have also thrown some light upon the browser compatibility and testing environment in order to make sure that the result availed by you is full-proof and at par or even better than your expectation.

References

While writing this guide, the following resources have been referenced:

0