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>
  )
);