nextjs: Listen to Layout events within pages

moezguedri — Sun, 15 May 2022 21:15:39 +0000

Is having a global state [callable, setCallable] a good design to make pages listen to Layout events.
Example:
We can have a button Print in the AppBar of the layout MyLayout.
Then, each page calls setCallable({ print: () => alert('print me') }).

/* _app.tsx */
import "../styles/globals.css";
import type { AppProps } from "next/app";
import MyLayout from "../components/MyLayout";
import { useState } from "react";

function MyApp({ Component, pageProps }: AppProps) {
  const [callable, setCallable] = useState();
  return (
      <MyLayout callable={callable}>
        <Component {...pageProps} setCallable={setCallable} />
      </MyLayout>
  );
}

export default MyApp;

/* MyLayout.tsx */
export default function MyLayout({ children, callable }) {
  return (
    <>
      <AppBar position="fixed" open={open}>
        <Toolbar>
          {callable?.print && (
            <IconButton onClick={callable.print}>
              <Print />
            </IconButton>
          )}
          {/*Other buttons to call other callbacks can be added here*/}
        </Toolbar>
      </AppBar>
      <main>{children}</main>
    </>
  );
}

/* MyPage.tsx */
export default function MyPage(props: any) {
  useEffect(() => {
    props.setCallable?.({
      print: () => alert("print the current page"),
      /* Other callbacks can be added here */
    });
  }, []);
}

DEV Community: moezguedri

nextjs: Listen to Layout events within pages