React-window-dimensions-hook NPM

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

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