npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

react-ref-decorator

0.0.6 • Public • Published

Build Status Code Climate Test Coverage Dependency Status devDependency Status

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.

Keywords

none

install

npm i react-ref-decorator

Downloadsweekly downloads

0

version

0.0.6

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability