Socket
Socket
Sign inDemoInstall

react-save-refs

Package Overview
Dependencies
1
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-save-refs


Version published
Weekly downloads
289
increased by103.52%
Maintainers
1
Install size
1.36 MB
Created
Weekly downloads
 

Changelog

Source

1.2.0 (2020-03-31)

  • Updated TypeScript and Flow type definitions to be stricter. There is no runtime change, but this may cause type-checking to fail for people who were using a type-checking system and were passing incorrect types to react-save-refs.

Readme

Source

react-save-refs

GitHub license npm version CircleCI Status Greenkeeper badge

This is a small utility function to make it easy for React components to deal with refs on dynamically created elements.

This package is deprecated in favor of react-multi-ref. Its API is better and avoids the need for a WeakMap internally.

The following example code assumes Babel with support for classes, JSX, and property initializers is in use. You can get that by using the es2015, stage-1, and react presets together.

import React from 'react';
import saveRefs from 'react-save-refs';

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

  render() {
    const items = new Array(5).fill(null).map((n, i) =>
      <div key={i}>
        <input type="text" ref={saveRefs(this._items, i)} />
      </div>
    );
    return (
      <div>
        <button onClick={this._onClick}>Alert</button>
        { items }
      </div>
    );
  }

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

A reference to each input element is stored as a value in the _items property in the above example.

The first argument to saveRefs must be the map to store the reference in, and the second argument is the key to store the reference under. Subsequent calls to saveRefs with the same arguments will return the same function until the element is unmounted, so React knows that it doesn't need to call the ref callback with null and then the element on every re-render.

This relies on Map and WeakMap 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.

Keywords

FAQs

Last updated on 31 Mar 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc