use-ref-map
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    🪝 use-ref-map

    npm NPM npm

    Dynamically generate and reference React reference instances with this handy hook.

    Install

    Via npm

    npm install use-ref-map

    Via Yarn

    yarn add use-ref-map

    How to use

    import useRefMap from 'use-ref-map`
    
    const ExampleComponent = ({ buttonData }) => {
      const { getRef, setRef } = useRefMap()
    
      const handleSubmit = (evt) => {
        evt.preventDefault()
    
        const email = getRef('email_input')?.current?.value
        const password = getRef('password_input')?.current?.value
      }
    
      return (
        <form onSubmit={handleSubmit}>
          <input type="email" ref={setRef('email_input')} />
          <input type="password" ref={setRef('password_input')} />
        </form>
      )
    }
    

    This is a silly example, but should give you an idea of how to use this hook. This is most useful when dealing with an array of components that require unique ref instance props passed to each, using an example key of something like, dynamic-ref-${id}.

    License

    MIT © Ryan Hefner

    Install

    npm i use-ref-map

    DownloadsWeekly Downloads

    21

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    8.77 kB

    Total Files

    11

    Last publish

    Collaborators

    • ryanhefner