Package Exports

use-ref-with-forwarding
use-ref-with-forwarding/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-ref-with-forwarding) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

useRefWithForwarding()

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:

yarn add use-ref-with-forwarding

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

Example

import React, { Ref, useEffect } from "react";
import { useRefWithForwarding } from "use-ref-with-forwarding";

export function Example({
    outerRef1,
    outerRef2,
}: {
    outerRef1: Ref<HTMLElement>;
    outerRef2: Ref<HTMLElement>;
}) {
    const innerRef = useRefWithForwarding<HTMLElement | null>(null, [
        outerRef1,
        outerRef2,
    ]);

    useEffect(() => {
        console.log(innerRef.current);
    });

    return <div ref={innerRef} />;
}

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 with your changes.