❤
npm
Sign UpSign In

react-window-size-hooks
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

react-window-size-hooks

npm version License: MIT CI Status

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

Readme

Keywords

Package Sidebar

Install

npm i react-window-size-hooks

Repository

github.com/mya-ake/react-window-size-hooks

Homepage

github.com/mya-ake/react-window-size-hooks#readme

Weekly Downloads

91

Version

1.0.3

License

MIT

Unpacked Size

8.38 kB

Total Files

9

Last publish

Collaborators

  • mya-ake
Try on RunKit
Report malware