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 NotifyResize wrapped component. 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, NotifyResize takes a prop onResize, called when element resized.

Usage

Example:

import notifyResize 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 =  notifyResize(MyComponent)

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

Function

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

const MyNotifiedComponent = notifyResize(MyComponent)

<MyNotifiedComponent ref="notifiedComponent" />

// to access your underling component use
// there is a bit of nesting because we need to allow the use as a hight order function
// or as a component
`this.refs.notifiedComponent.refs.notifyResizeWrapper.refs.component`

Component

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

class SomeComponent extends React.Component {
  render(){
    return <NotifyResize ref="notifyResize" factory={MyComponent} />
  }
}

// to access your underling component use
`this.refs.notifyResize.refs.component`

Props

Returned Component from notifyResize

Property	Type	Default	Description
onResize	Function	-	called when component changes

NotifyResize Component

Property	Type	Default	Description
factory	React Component	-	component to decorate