Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-viewport

jmfurlott33MIT1.0.6

A react component for handling different viewport widths and heights with fallbacks

vw, vh, react, container, viewheight, viewwidth

readme

react-viewport

Build React components with specified view height and width units. Supports fallback values for browsers that do not support vh or vw.

$ npm install --save react-viewport

Usage

Just use like you would any other div.

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

var Component = React.createClass({
    render: function() {
        <ViewportContainer
            className="Container"
            height="50vh"
            minWidth="75vw"
        >

            ...

       </ViewportContainer>
    }
});

Breaking changes

viewHeight and viewWidth are no longer supported, and should just be height and width. This change allows greater flexibility to use any css properties such as min-height or min-width.

License

MIT