react-listen-resize

Listener resize

Install

yarn

yarn add react-listen-resize

npm

npm install --save react-listen-resize

UMD

<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

ES2015

import { useListenResize, createListenResize, createWithListenResize } from 'react-listen-resize'

CommonJS

const {
  useListenResize,
  createListenResize,
  createWithListenResize
} = require('react-listen-resize')

Usage

createListenResize(callback, isInitExcutionCallback)

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
)

Params

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(callback, isInitExcutionCallback)

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
  )
}

Params

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()

createWithListenResize is a HOC.

import { createWithListenResize } from 'react-listen-resize'

function Example(props) {
  const { innerHeight, innerWidth, cancelListenResize } = props
}

Example = createWithListenResize()(Example)

Params

createWithListenResize return values in props.

Property	Description	Type
innerHeight	innerHeight	number
innerWidth	innerWidth	number
cancelListenResize	Call to cancel listening for resize.	function

LICENSE

MIT License