useLayoutMode

function useLayoutMode(): {
  mode: DisplayLayoutMode;
  setMode: (mode: DisplayLayoutMode) => void;
};

Returns the reactive display layout mode.

Subscribes to DisplayAutoLayouter.onModeChanged.

Returns

{
  mode: DisplayLayoutMode;
  setMode: (mode: DisplayLayoutMode) => void;
}

The current mode and a function to change it

Name	Type
`mode`	DisplayLayoutMode
`setMode()`	(`mode`: DisplayLayoutMode) => `void`

Throws

If called outside of an ImFusionProvider

Throws

If called before the SDK has finished initializing

Example

tsx

function LayoutPicker() {
  const { mode, setMode } = useLayoutMode();
  return (
    <select value={mode} onChange={(e) => setMode(e.target.value as DisplayLayoutMode)}>
      <option value="Auto">Auto</option>
      <option value="Rows">Rows</option>
      <option value="FocusPlusStack">Focus + Stack</option>
      <option value="FocusPlusRows">Focus + Rows</option>
    </select>
  );
}