https://github.com/coreprocess/use-ref-with-forwarding

A React hook combining multiple refs into one ref.
https://github.com/coreprocess/use-ref-with-forwarding

forwarding hook react react-hook ref useref userefwithforwarding

Last synced: about 1 month ago
JSON representation

A React hook combining multiple refs into one ref.

• Host: GitHub
• URL: https://github.com/coreprocess/use-ref-with-forwarding
• Owner: coreprocess
• Created: 2023-01-25T02:13:02.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-31T21:02:09.000Z (about 2 years ago)
• Last Synced: 2025-01-15T09:08:42.817Z (about 1 month ago)
• Topics: forwarding, hook, react, react-hook, ref, useref, userefwithforwarding
• Language: TypeScript
• Homepage:
• Size: 36.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# useRefWithForwarding()

![npm version](https://badgen.net/npm/v/use-ref-with-forwarding?icon=npm&label)

![GitHub checks](https://badgen.net/github/checks/teamrevin/use-ref-with-forwarding/publish?icon=github&label=GitHub)

`useRefWithForwarding()` is a simple React hook that can be used to combine multiple refs into one ref.

## Installation

Use your favourite manager to install the [package](https://www.npmjs.com/package/use-ref-with-forwarding):

```sh

yarn add use-ref-with-forwarding

```

```sh

npm install use-ref-with-forwarding --save

```

## Example

```ts

import React, { Ref, useEffect } from "react";

import { useRefWithForwarding } from "use-ref-with-forwarding";

export function Example({

    outerRef1,

    outerRef2,

}: {

    outerRef1: Ref;

    outerRef2: Ref;

}) {

    const innerRef = useRefWithForwarding(null, [

        outerRef1,

        outerRef2,

    ]);

    useEffect(() => {

        console.log(innerRef.current);

    });

    return 
;

}

```


## Reference

The hook is a generic with the following generic parameter:

-   `Value`: The value type of the reference.

The hook function accepts the following function parameters:

-   `initialValue: Value`: The value used to initialize the reference.

-   `refs: (((value: Value) => void) | { readonly current: Value; } | { current: Value; } | null | undefined)[]`: A list of references to which a reference update is passed.

It returns a reference object of the following type: `{ (node: Value): void; current: Value; }`

## License

This library is licensed under the MIT license.

## Contributing

We welcome contributions to the `use-ref-with-forwarding` library. To contribute, simply open a [pull request](https://github.com/teamrevin/use-ref-with-forwarding/pulls) with your changes.