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