1.0.0 • Public • Published


npm reffer Build Status codecov

Nice, DRY replacement for React string refs


React no longer allows string-based refs. Reffer is a small function to substitute in for those times that you don't need anything fancy from your ref callbacks. It avoids encouraging you to make one-character variables by managing the callback action itself.

To borrow and adapt React's own ref example, with Babel's experimental transform-function-bind plugin enabled, this is the ideal usage;

import reffer from 'reffer';
class CustomTextInput extends React.Component {
  handleFocusClick = () => {
    // Explicitly focus the text input using the raw DOM API
  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in this.textInput.
    return (
          ref={this::reffer('textInput')} />
          value="Focus the text input"

Reffer will return a simple function, which will apply the supplied ref to this when it's called.

Alternative Use

There are a few different modes of operation for Reffer, the first is passing its return value as the ref attribute (as seen above).

Spread Syntax

The second is to spread its return value onto the React component in question;

  {...this::reffer('textInput')} />

This will set ref on the element just the same as before, but is presented as an alternative syntax.

Plain JSX transformer compatible method

Alternatively, if you either aren't using Babel, or want to avoid experimental syntax, you can use Reffer like this;

  ref={reffer(this, 'textInput')} />

or, the same way, but using Spread syntax;

  {...reffer(this, 'textInput')} />

Package Sidebar


npm i reffer

Weekly Downloads






Last publish


  • ticky