Package Exports

react-notify-resize

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-notify-resize) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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