JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4376
  • Score
    100M100P100Q129418F
  • License MIT

React Component that notifies you whenever it is resized

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 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
  }
}

cosnt 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