on-resize

ES7 Decorator & Higher-Order Component for React, which is useful on resize event.

Installation

$ npm install --save on-resize

Usage

ES7 Decorator

import React from "react";
import {onResize} from "on-resize/react";

@onResize()
class Example extends React.Component {
  render () {
    // By default, when window.onresize emits, passes following props:
    //  `width`  : window.innerWidth - this.props.offsetWidth
    //  `height` : window.innerHeight - this.props.offsetHeight
    let {width, height, children} = this.props;

    return <div style={{ width, height }}>{children}</div>;
  }
}

React.render(<Example><h1>Hello</h1></Example>, document.body);

If you want to customize that prop name or value, you can pass function or use select option:

@onResize((props) => ({
  innerWidth: window.innerWidth,
  innerHeight: window.innerHeight
}))

// OR

@onResize({
  select: (props) => ({
    innerWidth: window.innerWidth,
    innerHeight: window.innerHeight
  })
})

Higher-Order Component

function bindOnResize(Component, options = {Function|Object})

import React from "react";
import {bindOnResize} from "on-resize/react";

class Example extends Component {
  render () {
    let {width, height, children} = this.props;
    return <div style={{ width, height }}>{children}</div>;
  }
}

Example = bindOnResize(Example)

React.render(<Example><h1>Hello</h1></Example>, document.body);

Todo

• [ ] Add tests more
• [X] Support Higher-Order Component
• [ ] Support other Virtual DOM libraries

License

MIT