React Component that notifies you whenever it is resized
npm install @zippytech/react-notify-resize> Get resize notifications on any React element
``sh`
$ npm install --save @zippytech/react-notify-resize
React Component that notifies you whenever it is resized - by any means.
It can be used as a standalone Component inside the HTML element you want to detect resize on.
Or it can be used as a higher-order function that takes your component and returns a NotifyResize wrapped component.
In order to use @zippytech/react-notify-resize - 3.0.0 you need to have react and prop-types packages installed in your app, since those are peer dependencies for this package. You can use any React version >=15.0.0
#### NotifyResize component
`jsx
import React, { Component } from 'react'
import { NotifyResize } from '@zippytech/react-notify-resize'
class MyComponent extends Component {
render(){
return
onResize({ width, height }){
//you get notified when the component div is resized
//the only condition is that it has a relative or absolute position
}
}
`
##### Props
* onResize({ width, height }): Function
* - if true, calls the onResize prop on component mount. Defaults to false
* - a custom function to measure HTMLElement size, if you want to provide one. It needs to return an object with {width, height}. By default node.offsetWidth and node.offsetHeight are used for measuring element size.shouldComponentUpdate: Function
* - a custom function to override the default shallowequal implementation. Called with shouldComponentUpdate(nextProps, currentProps, nextState, currentState)
#### NotifyResize higher-order function
`jsx
import notifyResize from '@zippytech/react-notify-resize'
class MyComponent extends React.Component {
render(){
// the element you want to listen for resize must have position relative
return
// will be called on resize if it is defined
onResize({ width, height }){
// do something on resize
}
}
const MyNotifiedComponent = notifyResize(MyComponent)
class App extends React.Component {
render(){
return
}
}
`
Notice that in this case, both the onResize instance function is called, if it exists, and the onResize prop is called, if it is a function.
You can nest the resizeTool prop wherever you want, as long as its parent has a relative or absolute position.
If you want to get a reference to your actual component, you can access that using .component. In the example above, you can use:
`jsxapp
//if you have a reference to the component```
app.refs.notifier.component
Not the most elegant access chain, but you can always use the plain component instead of the higher-order function.
#### Apache2