v0.1.0

Adds WithLayout and Loading components built for the Pages Router in Next.js. It will take any Layout and Loading prototyped to each page and render them accordingly.
For example:

Layout

This follows Next.js's Layout pattern (For the Pages router)

In _app.tsx:

import { WithLayout } from "react-kuh"

function MyApp(props) {
  return <WithLayout {...props} />
}

export default MyApp

In pages/index.tsx:

import MainLayout from "@/components/MainLayout"

export default function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

Home.Layout = MainLayout

Or you can pass that MainLayout directly in _app.js, so you wouldn't need to prototype it to each page:

import { WithLayout } from "react-kuh"

import MainLayout from "@/components/MainLayout"


function MyApp(props) {
  return <WithLayout {...props} defaultLayout={MainLayout} />
}

export default MyApp

Prototyping .Layout will override defaultLayout

Loading

Loading works with React.Suspense to show a fallback when Suspense is activated

Example:

import useFetch from "http-react";

export default function Home() {
  const { data } = useFetch("/api/hello", {
    suspense: true,
  });
  return (
    <div>
      <h2>Home</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Home.Loading = () => {
  return <p>Loading API data</p>
}

Same as Layout, you can pass defaultLoading:

import { WithLayout } from "react-kuh"

function MyApp(props) {
  return <WithLayout {...props} defaultLoading={() => <p>Loading</p>}/>
}

export default MyApp

This will not wrap Layout, so if suspense is activated in the Layout, it won't be caught by Suspense at this level

layoutProps and loadingProps:

You can pass layoutProps and loadingProps, which will be received as props by Layout and Loading specifically:

export default function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  )
}

Home.Layout = ({ appName, children }) => {
  return (
    <div>
      <nav>{appName}</nav>
      <div>{children}</div>
    </div>
  )
}

Home.Loading = ({ loadingMessage }) => <p>{loadingMessage}</p>

In _app.tsx:

import { WithLayout } from "react-kuh";

function MyApp(props) {
  return (
    <WithLayout
      {...props}
      layoutProps={{ appName: "My app" }}
      loadingProps={{ loadingMessage: "Loading" }}
    />
  );
}

export default MyApp;