Listener resize
yarn add react-listen-resizenpm install --save react-listen-resize<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>
OR
<script src="https://unpkg.com/[email protected]/dist/index.umd.min.js"></script>Tips: You can find the library on window.ReactListenResize.
import { useListenResize, createListenResize, createWithListenResize } from 'react-listen-resize'const {
useListenResize,
createListenResize,
createWithListenResize
} = require('react-listen-resize')createListenResize is a normal function.
import { createListenResize } from 'react-listen-resize'
const [state, cancelListenResize] = createListenResize(
({ eventResize, state: { innerHeight, innerWidth } }) => {
console.log('eventResize-callback:: ', eventResize)
console.log('state-callback:: ', innerHeight, innerWidth)
},
true
)createListenResize can pass two Params.
| Property | Description | Type | Default | isRequired |
|---|---|---|---|---|
| callback | listen for resize trigger callback. | ({eventResize, state: {innerHeight, innerWidth}}) => void | undefined | false |
| isInitExcutionCallback | Whether to excute the initial callback. | boolean | false | false |
createListenResize returns an array.
| Property | Description | Type |
|---|---|---|
| array[0] - state | Return {innerHeight, innerWidth} | object |
| array[1] - cancelListenResize | Call to cancel listening for resize | function |
useListenResize is a custom hook.
import { useListenResize } from 'react-listen-resize'
function Example() {
const [state, cancelListenResize] = useListenResize(
({ eventResize, state: { innerHeight, innerWidth } }) => {
console.log('eventResize-callback:: ', eventResize)
console.log('state-callback:: ', innerHeight, innerWidth)
},
true
)
}useListenResize can pass two Params.
| Property | Description | Type | Default | isRequired |
|---|---|---|---|---|
| callback | listen for resize trigger callback. | ({eventResize, state: {innerHeight, innerWidth}}) => void | undefined | false |
| isInitExcutionCallback | Whether to excute the initial callback. | boolean | false | false |
useListenResize returns an array.
| Property | Description | Type |
|---|---|---|
| array[0] - state | Return {innerHeight, innerWidth} . | object |
| array[1] - cancelListenResize | Call to cancel listening for resize. | function |
createWithListenResize is a HOC.
import { createWithListenResize } from 'react-listen-resize'
function Example(props) {
const { innerHeight, innerWidth, cancelListenResize } = props
}
Example = createWithListenResize()(Example)createWithListenResize return values in props.
| Property | Description | Type |
|---|---|---|
| innerHeight | innerHeight | number |
| innerWidth | innerWidth | number |
| cancelListenResize | Call to cancel listening for resize. | function |