Building react-viewport

At work I often have trouble taking advantage of using vh and vw units in CSS due to the browser compatibility. Complete lack of or partial support causes strange output, and, in most cases, the website can look completely ruined (for example, the units are super buggy on iOS 7).

Our stack use React, so we thought it would be best to create a reusable component that could handle fallbacks for browsers that do not support the viewport units. This was also my first time using npm to publish anything, which turned out to be a very simple and rewarding process. The result is react-viewport.

The Component

The goal was to be able to use both vh and vw units in a simple container so you could any content could be wrapped within it. The component has three available parameters: className, viewHeight, and viewWidth. It is used the following way:

var React = require('react');
var ViewportContainer = require('react-viewport');

var Component = React.createClass({
  render: function() {
    <ViewportContainer
      className="Container"
      viewHeight="50"
      viewWidth="50"
    >
      ...
    </ViewportContainer>
  }
});

The component itself works by simply checking to see if the browser being used supports vh or vw units. This test was inspired by Modernizer. It simply injects a div into the page, gives it a height of 50vh, and calculates the height of the div in pixels. It then compares this returned value with the value of window.innerheight/2. If they are the same, it is safe to assume that vh units are working. This is then repeated with vw units.

If either of those tests fail, a fallback mechanism is set in place. This is done just by setting up a window resize listener, and calculating the correct value in pixels based on the given viewHeight and viewWidth.

Let me know how you like it

If you use the component, let me know how it worked for you or feel free to open up an issue on the Github page if you find something wrong with it.

Written by Joseph Furlott who lives and works in Brooklyn, New York. I am a software engineer that specializes in designing and building web applications using React. I work at Datadog as a software engineer.