https://github.com/ryanhefner/use-ref-map

🪝 Dynamically generate and reference React reference instances with this handy hook.
https://github.com/ryanhefner/use-ref-map

Last synced: 21 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ryanhefner/use-ref-map
• Owner: ryanhefner
• License: mit
• Created: 2021-01-07T21:12:41.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-01-08T05:31:03.000Z (almost 4 years ago)
• Last Synced: 2024-10-24T18:47:25.927Z (27 days ago)
• Language: JavaScript
• Homepage: https://www.pkgstats.com/pkg:use-ref-map
• Size: 266 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🪝 use-ref-map

[![npm](https://img.shields.io/npm/v/use-ref-map?style=flat-square)](https://www.pkgstats.com/pkg:use-ref-map)

[![NPM](https://img.shields.io/npm/l/use-ref-map?style=flat-square)](LICENSE)

[![npm](https://img.shields.io/npm/dt/use-ref-map?style=flat-square)](https://www.pkgstats.com/pkg:use-ref-map)

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

## Install

Via [npm](https://npmjs.com/package/use-ref-map)

```sh

npm install use-ref-map

```

Via [Yarn](https://yarn.pm/use-ref-map)

```sh

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 (

    

      

      

    

  )

}

```

_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](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)