Layout Plugin

By default, Reactlit uses a simple 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 plugin provides a layout helper function to let you define more custom layouts with your Reactlit script.

Note

Currently this plugin is provided in the core package, but this may change in the future.

The layout function works via 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 { LayoutPlugin, Reactlit } from '@reactlit/core';
import { TextInput } from './inputs/basic-text-input';
import { ThreeColumnLayout } from './layouts/three-column-layout';

export default function LayoutExample() {
  return (
    <Reactlit plugins={[LayoutPlugin] as const}>
      {async ({ layout }) => {
        const [col1, col2, col3] = layout(ThreeColumnLayout);

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