# All files / src/utils applyRef.ts

100% Statements 43/43
100% Branches 7/7
100% Functions 1/1
100% Lines 43/43

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    441x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1432x
    800x
    800x
    632x
    1292x
    452x
    1432x
    180x
    180x
    1432x
     import type { MutableRefObject, Ref } from "react";

    /**
     * A small utility function that allows me to apply a passed in ref along with
     * my own custom ref logic.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { HTMLAttributes, forwardRef } from "react";
     * import { applyRef } from "@react-md/core";
     *
     * export type ExampleProps = HTMLAttributes<HTMLDivElement>;
     *
     * const Example = forwardRef<HTMLDivElement, ExampleProps>(function Example(props, ref) {
     *   const refHandler = useCallback((instance: HTMLDivElement | null) => {
     *     applyRef(instance, ref);
     *     if (!instance) {
     *       return;
     *     }
     *
     *     // do something with instance
     *   });
     *
     *   return <div ref={refHandler} />;
     * });
     * ```
     *
     * @param instance - The DOM Node instance
     * @param ref - The prop ref
     * @internal
     */
    export function applyRef<E>(instance: E | null, ref: Ref<E> | undefined): void {
      if (!ref) {
        return;
      }

      if (typeof ref === "function") {
        ref(instance);
      } else if (typeof ref === "object") {
        (ref as MutableRefObject<E | null>).current = instance;
      }
    }