https://github.com/gregberge/react-merge-refs

React utility to merge refs 🖇
https://github.com/gregberge/react-merge-refs

Last synced: 13 days ago
JSON representation

React utility to merge refs 🖇

• Host: GitHub
• URL: https://github.com/gregberge/react-merge-refs
• Owner: gregberge
• License: mit
• Created: 2019-09-19T21:00:57.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-10-06T13:20:56.000Z (about 1 year ago)
• Last Synced: 2024-10-10T10:01:31.208Z (24 days ago)
• Language: TypeScript
• Size: 790 KB
• Stars: 587
• Watchers: 5
• Forks: 17
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - react-merge-refs

README

        
# react-merge-refs

[![License](https://img.shields.io/npm/l/react-merge-refs.svg)](https://github.com/gregberge/react-merge-refs/blob/main/LICENSE)

[![npm package](https://img.shields.io/npm/v/react-merge-refs/latest.svg)](https://www.npmjs.com/package/react-merge-refs)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-merge-refs)](https://bundlephobia.com/package/react-merge-refs)

[![CI](https://github.com/gregberge/react-merge-refs/actions/workflows/ci.yml/badge.svg)](https://github.com/gregberge/react-merge-refs/actions/workflows/ci.yml)

React utility to merge refs 🖇

```sh

npm install react-merge-refs

```

## Example

```js

import React from "react";

import { mergeRefs } from "react-merge-refs";

const Example = React.forwardRef(function Example(props, ref) {

  const localRef = React.useRef();

  return 
;

});

```


## Why?

When developing low level UI components, it is common to have to use a local ref but also support an external one using `React.forwardRef`. Natively, React does not offer a way to set two refs inside the `ref` property. This is the goal of this small utility.

Today a `ref` can be a `function` or an `object`, tomorrow it could be another thing, who knows. This utility handles compatibility for you.

# License

MIT