https://github.com/austinsc/react-ref-decorator

An ES7 decorator for reffing and unreffing objects (anything that implements .ref() and .unref()) in the componentWillMount() and componentWillUnmount()
https://github.com/austinsc/react-ref-decorator

Last synced: 5 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/austinsc/react-ref-decorator
• Owner: austinsc
• License: mit
• Created: 2016-01-19T15:46:26.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-21T17:47:06.000Z (over 9 years ago)
• Last Synced: 2025-02-08T16:45:22.663Z (5 months ago)
• Language: JavaScript
• Size: 29.3 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](http://img.shields.io/travis/RoviSys/react-ref-decorator.svg?style=flat)](https://travis-ci.org/RoviSys/react-ref-decorator)

[![Code Climate](https://codeclimate.com/github/RoviSys/react-ref-decorator/badges/gpa.svg)](https://codeclimate.com/github/RoviSys/react-ref-decorator)

[![Test Coverage](https://codeclimate.com/github/RoviSys/react-ref-decorator/badges/coverage.svg)](https://codeclimate.com/github/RoviSys/react-ref-decorator/coverage)

[![Dependency Status](https://david-dm.org/RoviSys/react-ref-decorator.svg)](https://david-dm.org/RoviSys/react-ref-decorator)

[![devDependency Status](https://david-dm.org/RoviSys/react-ref-decorator/dev-status.svg)](https://david-dm.org/RoviSys/react-ref-decorator#info=devDependencies)

# react-ref-decorator

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

## Installation

Just run `npm install --save react-ref-decorator` and then use the default export of the module.

## 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:

```javascript

const componentWatcher = {

  ref() {

    // do something when the component mounts

  }

  

  unref() {

    // do something else when the component unmounts

  }

};

```

You can attach it like this:

```javascript

import Ref from 'react-ref-decorator';

@Ref(componentWatcher)

class MyComponent extends Component {

  render() {

    return (

      
Blah

    );

  }

}

```


The decorator also supports multiple 'reffable' arguments:

 

```javascript

import Ref from 'react-ref-decorator';

@Ref(componentWatcher1, componentWatcher2, componentWatcher3)

class MyComponent extends Component {

  render() {

    return (

      
Blah

    );

  }

}

```


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