react-multi-ref

Utility for keeping references to multiple React elements.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-multi-ref
1711.0.04 years ago4 years agoMinified + gzip package size for react-multi-ref in KB

Readme

react-multi-ref
GitHub license npm version CircleCI Status Greenkeeper badge
This is a small utility to make it easy for React components to deal with refs on multiple dynamically created elements.
The following example code assumes that you're using either Babel with the "babel/plugin-proposal-class-properties" plugin active or TypeScript.
import React from 'react';
import MultiRef from 'react-multi-ref';

class Foo extends React.Component {
  _items = new MultiRef();

  render() {
    // Make a 5-item array of divs with keys 0,1,2,3,4
    const items = new Array(5).fill(null).map((n, i) =>
      <div key={i}>
        <input type="text" ref={this._items.ref(i)} />
      </div>
    );
    return (
      <div>
        <button onClick={this._onClick}>Alert</button>
        { items }
      </div>
    );
  }

  _onClick = () => {
    const parts = [];
    this._items.map.forEach(input => {
      parts.push(input.value)
    });
    alert('all inputs: ' + parts.join(', '));
  };
}

The multiRef.map property is a Map object containing entries where the key is the parameter passed to multiRef.ref(key) and the value is the ref element given by React.
Multiple calls to multiRef.ref(key) with the same key return the same value so that React knows that it doesn't need to update the ref.
This relies on Map being available globally. A global polyfill such as Babel's polyfill is required to support older browsers that don't implement these.

Types

Both TypeScript and Flow type definitions for this module are included! The type definitions won't require any configuration to use.