Skip to content

alexander-gusev-dev/use-dynamic-refs

 
 

Repository files navigation

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

About

A React hook to dynamically set and get Refs.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 46.5%
  • TypeScript 24.4%
  • JavaScript 18.2%
  • CSS 10.9%