Skip to main content
react-md

useTemporaryLayout 

function useTemporaryLayout(
  options: TemporaryLayoutOptions
): TemporaryLayoutImplementation;

The useTemporaryLayout hook is used to create a layout where the main navigation is hidden in a Sheet until a user clicks a button to show the navigation.

Example Usage

The hook requires the current pathname to be provided from the current routing library to automatically hide the Sheet whenever the pathname changes

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { Button } from "@react-md/core/button/Button";
import { useTemporaryLayout } from "@react-md/core/layout/useTemporaryLayout";
import { Main } from "@react-md/core/layout/Main";
import { Sheet } from "@react-md/core/sheet/Sheet";
import { type ReactElement, type ReactNode } from "react";

import { CustomNavigation } from "./CustomNavigation.jsx";

export interface LayoutProps {
  children: ReactNode;
}

export function Layout(props: LayoutProps): ReactElement {
  const { children } = props;

  // choose whichever one for your app
  // nextjs app dir
  const pathname = usePathname();
  // nextjs pages
  const { pathname } = useRouter();
  // react router
  const { pathname } = useHistory();

  const {
    mainProps,
    navToggleProps,
    temporaryNavProps,
  } = useTemporaryLayout({ pathname });

  return (
    <>
      <AppBar position="fixed">
        <Button {...navToggleProps} />
        <AppBarTitle>Hello, world!</AppBarTitle>
      </AppBar>
      <Main {...mainProps}>{children}</Main>
      <Sheet {...temporaryNavProps}>
        <CustomNavigation />
      </Sheet>
    </>
  );
}

Parameters

export interface TemporaryLayoutOptions {
  /**
   * This is used to automatically hide the temporary navigation whenever the
   * route changes. Set this to `null` if you want to handle closing yourself.
   */
  pathname: string | null;

  /** @defaultValue `"fixed"` */
  appBarPosition?: CssPosition;

  /** @defaultValue `false` */
  defaultVisible?: UseStateInitializer<boolean>;
}

Returns

export interface TemporaryLayoutImplementation {
  visible: boolean;
  showTemporaryNav: () => void;
  hideTemporaryNav: () => void;
  appBarProps: ProvidedTemporaryLayoutAppBarProps;
  mainProps: ProvidedTemporaryLayoutMainProps;
  navToggleProps: ProvidedLayoutNavToggleProps;
  temporaryNavProps: ProvidedTemporaryLayoutNavProps;
}

export type ProvidedLayoutNavToggleProps = PropsWithChildren<
  Pick<Required<ButtonProps>, "aria-label" | "buttonType" | "onClick">
>;

export type ProvidedTemporaryLayoutNavProps = Pick<
  Required<SheetProps>,
  "aria-label" | "visible" | "onRequestClose"
>;

export type ProvidedTemporaryLayoutMainProps = Required<
  Pick<MainProps, "appBarOffset">
>;

export type ProvidedTemporaryLayoutAppBarProps = Required<
  Pick<AppBarProps, "position">
>;

See Also