Package Exports
- @react-hook/window-size
- @react-hook/window-size/throttled
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-hook/window-size) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@react-hook/window-size
npm i @react-hook/window-size
React hooks for updating components when the size of the window
changes.
Quick Start
//
// Debounced values
import {
useWindowSize,
useWindowWidth,
useWindowHeight,
} from '@react-hook/window-size'
const Component = props => {
const [width, height] = useWindowSize()
}
//
// Throttled values
import {
useWindowSize,
useWindowWidth,
useWindowHeight,
} from '@react-hook/window-size/throttled'
const Component = props => {
const [width, height] = useWindowSize()
}API
useWindowSize(initialWidth?: number, initialHeight?: number, debounceOptions?: DebounceOptions)
Options
| Type | Default | Description | |
|---|---|---|---|
| initialWidth | number |
The initial width to use when there is no window object |
|
| initialHeight | number |
The initial width to use when there is no window object |
|
| debounceOptions | DebounceOptions |
Options object passed to the useDebounce hook |
DebounceOptions
| Key | Type | Default | Description |
|---|---|---|---|
| wait | number |
100 |
Defines the amount of time you want setState to wait after the last received action before executing |
| leading | boolean |
false |
Calls setState on the leading edge (right away). When false setState will not be called until the next frame is due |
Returns [width: number, height: number]
| Type | Description | |
|---|---|---|
| width | number |
The current clientWidth of the window |
| height | number |
The current clientHeight of the window |
useWindowWidth(initialWidth?: number, debounceOptions?: DebounceOptions)
Options
| Type | Default | Description | |
|---|---|---|---|
| initialWidth | number |
The initial width to use when there is no window object |
|
| debounceOptions | DebounceOptions |
Options object passed to the useDebounce hook |
DebounceOptions
| Key | Type | Default | Description |
|---|---|---|---|
| wait | number |
100 |
Defines the amount of time you want setState to wait after the last received action before executing |
| leading | boolean |
false |
Calls setState on the leading edge (right away). When false setState will not be called until the next frame is due |
Returns width
| Type | Description | |
|---|---|---|
| width | number |
The current clientWidth of the window |
useWindowHeight(initialHeight?: number, debounceOptions?: DebounceOptions)
Options
| Type | Default | Description | |
|---|---|---|---|
| initialHeight | number |
The initial width to use when there is no window object |
|
| debounceOptions | DebounceOptions |
Options object passed to the useDebounce hook |
DebounceOptions
| Key | Type | Default | Description |
|---|---|---|---|
| wait | number |
100 |
Defines the amount of time you want setState to wait after the last received action before executing |
| leading | boolean |
false |
Calls setState on the leading edge (right away). When false setState will not be called until the next frame is due |
Returns height: number
| Type | Description | |
|---|---|---|
| height | number |
The current clientHeight of the window |
Throttled API
To use these throttled hooks instead of debounced hooks, import with import {...} from '@react-hook/window-size/throttled
useWindowSize(initialWidth?: number, initialHeight?: number, throttleOptions?: ThrottleOptions)
Options
| Type | Default | Description | |
|---|---|---|---|
| initialWidth | number |
The initial width to use when there is no window object |
|
| initialHeight | number |
The initial width to use when there is no window object |
|
| throttleOptions | ThrottleOptions |
Options object passed to the useThrottle hook |
ThrottleOptions
| Key | Type | Default | Description |
|---|---|---|---|
| fps | number |
30 |
Defines the rate in frames per second with which the scroll position is updated |
| leading | boolean |
false |
Calls setState on the leading edge (right away). When false setState will not be called until the next frame is due |
Returns [width: number, height: number]
| Type | Description | |
|---|---|---|
| width | number |
The current clientWidth of the window |
| height | number |
The current clientHeight of the window |
useWindowWidth(initialWidth?: number, throttleOptions?: ThrottleOptions)
Options
| Type | Default | Description | |
|---|---|---|---|
| initialWidth | number |
The initial width to use when there is no window object |
|
| throttleOptions | ThrottleOptions |
Options object passed to the useThrottle hook |
ThrottleOptions
| Key | Type | Default | Description |
|---|---|---|---|
| fps | number |
30 |
Defines the rate in frames per second with which the scroll position is updated |
| leading | boolean |
false |
Calls setState on the leading edge (right away). When false setState will not be called until the next frame is due |
Returns width
| Type | Description | |
|---|---|---|
| width | number |
The current clientWidth of the window |
useWindowHeight(initialHeight?: number, throttleOptions?: ThrottleOptions)
Options
| Type | Default | Description | |
|---|---|---|---|
| initialHeight | number |
The initial width to use when there is no window object |
|
| throttleOptions | ThrottleOptions |
Options object passed to the useThrottle hook |
ThrottleOptions
| Key | Type | Default | Description |
|---|---|---|---|
| fps | number |
30 |
Defines the rate in frames per second with which the scroll position is updated |
| leading | boolean |
false |
Calls setState on the leading edge (right away). When false setState will not be called until the next frame is due |
Returns height: number
| Type | Description | |
|---|---|---|
| height | number |
The current clientHeight of the window |
LICENSE
MIT