@hmn/use-window-size

A hook that provides information of the dimensions of the window

Installation

npm install --save @hmn/use-window-size

Importing the hook

import useWindowSize from '@hmn/use-window-size'

Usage

const Demo = () => {
    const { innerWidth, innerHeight, outerHeight, outerWidth } = useWindowSize()

    return (
        <>
            <h1>Window dimensions</h1>
            <h3>Resize window to see changes</h3>
            <div>
                <div>innerWidth: {innerWidth}</div>
                <div>innerHeight: {innerHeight}</div>
                <div>outerWidth: {outerWidth}</div>
                <div>outerHeight: {outerHeight}</div>
            </div>
        </>
    )
}

render(<Demo/>)