react-ref-decorator

An ES7 decorator for reffing and unreffing objects (anything that implements .ref() and .unref()) in the componentWillMount() and componentWillUnmount()

Purpose

The purpose of this module is to add some abbreviated syntax for hooking into a component's mount lifecycle.

Example

Lets say you have some object that needs to be tied to the mounted portion of a React component's lifecycle:

const componentWatcher = {
  ref() {
    // do something when the component mounts
  }
  
  unref() {
    // do something else when the component unmounts
  }
};

You can attach it like this:

import Ref from 'react-ref-decorator';

@Ref(componentWatcher)
class MyComponent extends Component {
  render() {
    return (
      <h1>Blah</h1>
    );
  }
}

The decorator also supports multiple 'reffable' arguments:

import Ref from 'react-ref-decorator';

@Ref(componentWatcher1, componentWatcher2, componentWatcher3)
class MyComponent extends Component {
  render() {
    return (
      <h1>Blah</h1>
    );
  }
}

Now when the component mounts and unmounts your componentWatchers ref/unref functions will be called respectively.