A simple React component which allows to listen the `resize` event of itself when it's resized.
JavaScript
Latest commit 8991e27 Nov 30, 2016 @FezVrasta committed on GitHub Merge pull request #1 from simianhacker/master
Changing event creation to be compatible with IE11
Permalink
Failed to load latest commit information.
src
.gitignore
.npmignore now the build should be fixed.. May 8, 2016
README.md
example.js
package.json
webpack.config.js

README.md

react-resize-aware

A simple React.js component you can use to make any piece of UI aware of its size.

Each time the component changes its size (it can be due to a window resize, a CSS change, a JS action, etc...) a resize event will be fired on the component itself.

You can then listen to such event to perform any kind of operation.

This component doesn't rely on intervals, loops or any other weird stuff.
It takes advantage of the resize event of the <object> HTML element.

It requires just React.js and ReactDOM.

Install it with:

npm install react-resize-aware --save

Usage

note: ResizeAware needs a position different from initial to work!
Make sure to set it to relative, absolute or fixed trough style or CSS

import React, { Component } from 'react'
import { findDOMNode } from 'react-dom'
import ResizeAware from 'react-resize-aware'

export default class FooBar extends Component {
  render() {
    return (
      <ResizeAware ref='container' style={{position: 'relative'}}>
        Hello, World!
      </ResizeAware>
    )
  }

  componentDidMount() {
    findDOMNode(this.refs.container).addEventListener('resize', (evt) => {
      console.log('Component has been resized!')
    })
  }
}

License

MIT License Copyright 2016, Federico Zivolo