use-dynamic-refs

A React hook to dynamically set and get DOM/Component refs

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
use-dynamic-refs
6151.0.04 years ago4 years agoMinified + gzip package size for use-dynamic-refs in KB

Readme

React use-dynamic-refs
Made with create-react-library

NPM JavaScript Style Guide

Install

npm install --save use-dynamic-refs

Usage

import React, { useEffect } from 'react';
import useDynamicRefs from 'use-dynamic-refs';

const Example = () =>  {
  const foo = ['random_id_1', 'random_id_2'];
  const [getRef, setRef] =  useDynamicRefs();

  useEffect(() => {
    // Get ref for specific ID 
    const id1 = getRef('random_id_1');
    console.log(id1)
  }, [])

    return ( 
      <>
        {/* Simple set ref. */}
        <span ref={setRef('random_id_3')}></span>

         {/*  Set refs dynamically in Array.map() */}
        { foo.map((eachId, idx) => (
          <div ref={setRef(eachId)}> Hello {each} </div>))}
      </>
    )
}

export default Example;

License

MIT © fitzmode