Demo: https://dvyogesh.github.io/lerna-starter/?path=/story/design-system-windowdimensions--window-dimensions

get window / viewPort width / height

`react-window-dimensions-hook` will helps to get window / viewPort width or window / viewPort height .

`react-window-dimensions-hook` is a powerful and lightweight, flexible ES6 JavaScript library it will help to solve css in js problems and will hepls to get height and width

Supports Resize the window also.we can access dynamic width/height while browser rezize

Features

Server side rendering
we can access window width and height very simpley
support Resize the window
light waight

Install

$ npm install react-window-dimensions-hook --save

$ yarn add react-window-dimensions-hook

Usage

Just import the useWindowDimensions component from react-window-dimensions-hook

  import React, { useEffect } from 'react';
  import useWindowDimensions from 'react-window-dimensions-hook';

  const WidthHeightExample = () => {
    useEffect(()=>{
      const {width, height} = useWindowDimensions();
      console.log('width', width);
      console.log('height', height);
    })

    return(
      <div>check width and height in browser console</div>
    )
  }

  export default WidthHeightExample;

Simple DOM Example conditional Render

Just import the useWindowDimensions component from react-window-dimensions-hook

  import React from 'react';
  import useWindowDimensions from 'react-window-dimensions-hook';
  const {width, height} = useWindowDimensions();

  console.log('width', width);
  console.log('height', height);
  const WidthHeightExample = () => (
    <div>
      <p>width is ${ width } </p>
      <p>height is ${ height } </p>
    </div>
  )

  export default WidthHeightExample;

##### Simple DOM Example conditional Render react

in this way we can avoid window undefined error while add window.addEventListener

  import React from 'react';
  import useWindowDimensions from 'react-window-dimensions-hook';
  const {width, height} = useWindowDimensions();

  console.log('width', width);
  console.log('height', height);
  const WidthHeightExample = () => (
      <div>
      {
        width > 768 && (
          <p>width is ${ width } </p>
        )
      }

      {
        height > 200 && (
          <p>height greterthen 200</p>
        )
      }
    </div>
  )

  export default WidthHeightExample;

##### Simple DOM Example conditional Render SSR (server side rendering) react

in this way we can avoid window undefined error while add window.addEventListener

  import React, {useEffect, useState} from 'react';
  import useWindowDimensions from 'react-window-dimensions-hook';

  const WidthHeightExample = () => {
      const [getWidth, setGetWidth] = useState();
      const [getHeight, setGetHeight] = useState();
      const {width, height} = useWindowDimensions();
      useEffect(()=>{
        setGetWidth(width);
        setGetHeight(height);
      }, [width, height])
      return(<div>
      {
        getWidth > 768 && (
          <p>width is ${ getWidth } </p>
        )
      }

      {
        getHeight > 200 && (
          <p>height greterthen 200</p>
        )
      }
    </div>)
  }

  export default WidthHeightExample;

or visit https://dvyogesh.github.io/lerna-starter/?path=/story/design-system-windowdimensions--window-dimensions

supports Universal Testing Pattern

LICENSE

MIT

Package detail

react-window-dimensions-hook

readme