react-notify-resize

react-notify-resize

React Element that notifies you whenever it is resized - by any means.

It can be used as a function that takes a component and returns a ResizeNotifier. Or as a high order component that takes as prop factory a component.

You can be notified of resize by two means:

• inside your component if you define a onResize method it will be called when resized
• outside, ResizeNotifier takes a prop onResize calledwhen element resized

Usage

Example:

import resizeNotifier from 'react-notify-resize'

class MyComponent extends React.Component {
  
  render(){
    // the element you want to listen for resize must have position relative
    return <div style={{position: 'relative'}}>
      {
        // Include this helper inside the element you want to listen for resize
        // It renders two divs, with position absolute
        this.props.resizeTool
      }
    </div>
  }
      
  // will be called on resize if it is defined
  onResize(){
    // do something on resize
  }
}

const MyNotifiedComponent =  resizeNotifier(MyComponent)

<MyNotifiedComponent onResize={/* event called when elementchanges dimension */}

Function

import MyComponent from './MyComponent'
import resizeNotifier from 'react-notify-resize'

const MyNotifiedComponent = resizeNotifier(MyComponent)

Component

import MyComponent from './MyComponent'
import { ResizeNotifier } from 'react-notify-resize'

class SomeComponent extends React.Component {
  render(){
    return <ResizeNotifier factory={MyComponent} />
  }
}

Props

Returned Component from resizeNotifier

Property	Type	Default	Description
onResize	Function	-	called when component changes

ResizeNotifier Component

Property	Type	Default	Description
factory	React Component	-	component to decorate