1.0.3 • Published 4 years ago
react-window-size-hooks v1.0.3
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.