S

useFormLayout

Converts FormLayout config into CSS grid classes and inline styles.

useFormLayout

Converts a FormLayout configuration object into a CSS class string and optional inline style for the form grid container.

You probably don’t need this directly. The <Form /> component calls it internally. Use it when building a custom form container that needs the same grid layout.

Signature

import { useFormLayout } from '@saastro/forms';

const { gridClassName, gridStyle } = useFormLayout(layout);

Parameters

ParameterTypeRequiredDescription
layoutFormLayoutNoLayout configuration from config.layout

Return Value

PropertyTypeDescription
gridClassNamestringTailwind CSS classes for the grid container (e.g. 'grid grid-cols-12 gap-4')
gridStyleCSSProperties | undefinedInline styles for custom column counts outside the Tailwind class map

How It Works

This is a thin wrapper around getFormGridClass(layout):

  • Manual mode: Generates grid grid-cols-{columns} gap-{gap} classes
  • Auto mode: Generates CSS Grid with grid-template-columns: repeat(auto-fill, minmax({minFieldWidth}px, 1fr))
  • Falls back to sensible defaults when layout is undefined

Example

import { useFormLayout } from '@saastro/forms';

function CustomFormGrid({ config, children }) {
  const { gridClassName, gridStyle } = useFormLayout(config.layout);

  return (
    <div className={gridClassName} style={gridStyle}>
      {children}
    </div>
  );
}