# All files / src/layout useLayoutAppBarHeight.ts

97.87% Statements 92/94
66.66% Branches 2/3
100% Functions 1/1
97.87% Lines 92/94

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
    88
    89
    90
    91
    92
    93
    94
    951x
    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
    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
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    5x

    5x
    5x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
     "use client";
    import type { Ref, RefCallback } from "react";
    import { useMemo } from "react";
    import type { DefinedCSSVariableName } from "../theme/types.js";
    import type { CSSVariable } from "../theme/useCSSVariables.js";
    import { useElementSize } from "../useElementSize.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-layout-size"?: string;
        "--rmd-layout-header-height"?: string;
      }
    }

    /**
     * @remarks \@since 6.0.0
     */
    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>
     *   );
     * };
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function useLayoutAppBarHeight(
      ref?: Ref<HTMLDivElement>
    ): LayoutAppBarHeightResult {
      const { height, elementRef } = useElementSize({
        ref,
        disableWidth: true,
      });
      const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {
        if (Number.isNaN(height)) {
          return [];
        }

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

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