Layout

By default, Reactlit uses a simple flat layout system where each display call concatenates a ReactNode to the DOM. This works great for simple applications, where you are ok just showing your content in a single column, but as your application grows, you may want to have more control over the layout.

The built-in layout view lets you define more custom layouts with your Reactlit script.

The layout view works via a modified version of the tunnel-rat library. It takes a number of slots to expose and a render function that defines how those slots are layed out. Then, for each slot, it returns a mini-context with view and display functions that render specifically within that slot.

This is a bit abstract, so let’s look at an example.

Layout Example App

layout-example.tsx

import { LayoutView, useReactlit } from "@reactlit/core";
import { TextInput } from "./inputs/basic-text-input";

export default function LayoutExample() {
  const Reactlit = useReactlit();
  return (
    <Reactlit>
      {async ({ view }) => {
        const [col1, col2, col3] = view(
          "cols",
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr 1fr",
              gap: "1rem",
              alignItems: "end",
            }}
          />,
          // the second argument here wraps each slot in a div so that they show
          // up as a single grid column in the layout
          LayoutView(3, <div />),
        );

        col1.display("First Name");
        const first = col1.view("first", TextInput);

        col2.display("Last Name");
        const last = col2.view("last", TextInput);

        col3.display("Hello to");
        col3.display(
          <div>
            {first} {last}
          </div>,
        );
      }}
    </Reactlit>
  );
}

Layout Definition

layouts/three-column-layout.tsx

import { defineLayout } from "@reactlit/core";

export const ThreeColumnLayout = defineLayout(
  3,
  ({ slots: [Slot1, Slot2, Slot3] }) => (
    <div
      style={{
        display: "grid",
        gap: "1rem",
        gridTemplateColumns: "1fr 1fr 1fr",
        alignItems: "baseline",
      }}
    >
      <div>
        <Slot1 />
      </div>
      <div>
        <Slot2 />
      </div>
      <div>
        <Slot3 />
      </div>
    </div>
  ),
);