react-window-size-hooks

react-window-size-hooks

React hooks to get the window size.

Install

npm

$ npm i react-window-size-hooks

yarn

$ yarn add react-window-size-hooks

Usage

import React from 'react';
import { useWindowSize } from 'react-window-size-hooks';

export const ShowWindowSize = () => {
  const { width, height } = useWindowSize();
  // do something
};

use only the width or height

import React from 'react';
import { useWindowWidth, useWindowHeight } from 'react-window-size-hooks';

export const ShowWindowSize = () => {
  const width = useWindowWidth();
  const height = useWindowHeight();
  // do something
};

used in SSR

Set an arbitrary initial value. If not set, the size is 0.

import React from 'react';
import { useWindowSize } from 'react-window-size-hooks';

export const ShowWindowSize = () => {
  const { width, height } = useWindowSize({
    width: 800,
    height: 600,
  });
  // do something
};

FAQ

What is the interval between Throttling?

33ms. It's about 30FPS.

What are the characteristics of the react-window-size-hooks?

• Only one resize event is registered, even if used in multiple locations.
  • Throttling is also done in one place, which is efficient.
• Supports TypeScript.

Contribution

If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

License

MIT