# All files / layout useLayoutAppBarHeight.ts

0% Statements 0/86
0% Branches 0/1
0% Functions 0/1
0% Lines 0/86

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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87

     "use client";
    import type { Ref, RefCallback } from "react";
    import { useCallback, useMemo, useState } from "react";
    import type { DefinedCSSVariableName } from "../theme/types";
    import type { CSSVariable } from "../theme/useCSSVariables";
    import { useResizeObserver } from "../useResizeObserver";

    export interface LayoutAppBarHeightResult {
      height: number | undefined;
      variables: readonly CSSVariable<DefinedCSSVariableName>[];
      appBarRef: RefCallback<HTMLDivElement>;
    }

    /**
     * @example
     * Main Usage
     * ```tsx
     * import type { PropsWithChildren, ReactElement } from "react";
     * import {
     *   AppBar,
     *   useCSSVariables,
     *   useLayoutAppBarHeight
     * } from "@react-md/core";
     *
     * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {
     *   const { appBarRef, variables } = useLayoutAppBarHeight();
     *   useCSSVariables(variables);
     *
     *   return (
     *     <AppBar ref={appBarRef} {...customProps}>
     *       <CustomChildren />
     *     </AppBar>
     *   );
     * };
     * ```
     *
     * @example
     * Inline Variables
     * ```tsx
     * import type { PropsWithChildren, ReactElement } from "react";
     * import {
     *   AppBar,
     *   useCSSVariables,
     *   useLayoutAppBarHeight
     * } from "@react-md/core";
     *
     * export function Layout({ children }: PropsWithChildren): ReactElement {
     *   const { appBarRef, variables } = useLayoutAppBarHeight();
     *   const inlineStyle = useCSSVariables(variables, true);
     *
     *   return (
     *     <div style={inlineStyle}>
     *       <AppBar ref={appBarRef} {...customProps}>
     *         <CustomChildren />
     *       </AppBar>
     *       {children}
     *     </div>
     *   );
     * };
     * ```
     */
    export function useLayoutAppBarHeight(
      ref?: Ref<HTMLDivElement>
    ): LayoutAppBarHeightResult {
      const [height, setHeight] = useState<number | undefined>();
      const targetRef = useResizeObserver({
        ref,
        onUpdate: useCallback((entry) => {
          setHeight(entry.borderBoxSize[0].blockSize);
        }, []),
        disableWidth: true,
      });
      const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {
        if (typeof height !== "number") {
          return [];
        }

        return [{ name: "--rmd-layout-header-offset", value: `${height}px` }];
      }, [height]);

      return {
        height,
        variables,
        appBarRef: targetRef,
      };
    }