❤
npm
Sign UpSign In

react-listen-resize
TypeScript icon, indicating that this package has built-in type declarations

0.1.5 • Public • Published

react-listen-resize

NPM Version Build Status Coverage Status

Listener resize

Install

yarn

yarn add react-listen-resize

npm

npm install --save react-listen-resize

UMD

<script src="https://unpkg.com/react-listen-resize@0.1.0/dist/index.umd.js"></script>
 
OR
 
<script src="https://unpkg.com/react-listen-resize@0.1.0/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

Readme

Keywords

Package Sidebar

Install

npm i react-listen-resize

Repository

github.com/sanshuiwang/react-listen-resize

Homepage

github.com/sanshuiwang/react-listen-resize#readme

Weekly Downloads

7

Version

0.1.5

License

MIT

Unpacked Size

113 kB

Total Files

14

Last publish

Collaborators

  • sanshuiwang
Try on RunKit
Report malware