React Viewport Size

Add a little widget in any of your screen corners to see the viewport size.

This widget helps a lot, when you are testing web responsive design, to know the current viewport size, and how the media queries works.

Demo

See this demo page, and try to resize it.

Installation

npm

npm install react-viewport-size

yarn

yarn add react-viewport-size

usage

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import ViewportSize from 'react-viewport-size';

ReactDOM.render(
  <React.Fragment>
    <App />
    <ViewportSize />
  </React.Fragment>,
  document.getElementById('root')
);

Props

Prop|Type|Default Value|Options|Description ----|----|-------------|-------|----------- className|string|viewport-size-widget|custom|Define the classname for the widget corner|string|top-right|[top/bottom]-[left/right]|Define the position on the screen (only with the default className) enabledInProduction|boolean|false|true/false|Render the component in production environment