API REFERENCE

Layout Component

LayoutComponent is a functional component that defines the structure of a layout component.

Example

TypeScript
JavaScript
app.layout.tsx
tsximport { LayoutComponent, Outlet } from "rasengan";
 
const AppLayout: LayoutComponent = () => {
  return (
    <div>
      <header>
        <h1>App Layout</h1>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}
 
AppLayout.path = "/";
 
export default AppLayout;

The LayoutComponent function component requires a path property to define the route layout that will be considered as the base path of all pages that will use the layout.

Inside the return, the Outlet component is used to render the child components of the layout.

Properties and Methods

The LayoutComponent function has the following properties and methods:

Properties

  • path: The path of the layout component. This is used to define the route layout that will be considered as the base path of all pages that will use the layout.

Methods

  • loader(): Similar to getServerSideProps() in Next.js, this method is used to make some operations on the server before the layout is rendered. It should return a promise with the result of the operations.

The loader() method is optional. The returned promise has to follow the following structure:

JS
tstype LoaderResponse = {
  props?: { [key: string]: any };
  redirect?: string
};

Example with loader() method

return props

TypeScript
JavaScript
app.layout.tsx
tsximport { LayoutComponent, Outlet } from "rasengan";
 
type Props = {
  title: string;
};
 
const AppLayout: LayoutComponent = ({ title }: Props) => {
   return (
    <div>
      <header>
        <h1>{title}</h1>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}
 
AppLayout.path = "/";
 
AppLayout.loader = async () => {
  // You can make some operations here
 
  return {
    props: {
      title: "App Layout"
    }
  };
};
 
export default AppLayout;

In the example above, the loader method is used to make some operations on the server before the layout is rendered.

The loader method returns a promise with the props that will be passed to the layout component.

redirect

You can also use the redirect property to redirect the user to another page.

TypeScript
JavaScript
app.layout.tsx
tsximport { LayoutComponent, Outlet } from "rasengan";
 
type Props = {
  title: string;
};
 
const AppLayout: LayoutComponent = ({ title }: Props) => {
   return (
    <div>
      <header>
        <h1>{title}</h1>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}
 
AppLayout.path = "/";
 
AppLayout.loader = async () => {
  const isAuth = false;
 
  if (!isAuth) {
    return {
      redirect: "/login"
    };
  }
 
  return {
    props: {
      title: "App Layout"
    }
  };
};
 
export default AppLayout;

use arguments

You have to possibility to access to some parameters via the loader methods:

  • params: Which is an object containing the list of params passed into the URL.
  • request: Which is the request object from the server.
TypeScript
JavaScript
app.layout.tsx
tsximport { LoaderOptions } from "rasengan"
 
AppLayout.loader = async loader({ params, request }: LoaderOptions) {
  // You can make some operations here
 
  return {
    props: {}
  }
}

dynamic metadata

You have to possibility to define dynamic metadata via the loader methods. To do so, you have to return an object with the meta property.

TypeScript
JavaScript
app.layout.tsx
tsximport { LoaderOptions } from "rasengan"
 
AppLayout.loader = async loader() {
  return {
    meta: {
      openGraph: {
        // open graph properties here
      },
 
      twitter: {
        // twitter properties here
      },
 
      links: {
        // links properties here
      }
    }
  }
}

dynamic metadata allows you to define metadata by using data coming from a database or any other source.

Template
Page Component