# ResponsiveFlexiBoard

> A wrapper component that manages different board layouts for different viewport breakpoints.

Source: https://www.flexiboards.dev/docs/components/responsive-board

Framework: Svelte

## ResponsiveFlexiBoard (component)

**Props**

| Name | Type | Description |
| --- | --- | --- |
| `controller` (bindable) | `ResponsiveFlexiBoardController \| undefined` | Optional. The controller managing this component's state and behaviour. Bind to it to access the component's imperative API. |
| `onfirstcreate` | `((instance: ResponsiveFlexiBoardController) => void) \| undefined` | Optional. Fires when the component's controller is first created. |
| `config` | `ResponsiveFlexiBoardConfiguration` | Optional. The configuration object for the responsive board. |
| `lg` | `Snippet` | Optional. Content rendered at the large breakpoint. |
| `md` | `Snippet` | Optional. Content rendered at the medium breakpoint. |
| `sm` | `Snippet` | Optional. Content rendered at the small breakpoint. |
| `xs` | `Snippet` | Optional. Content rendered at the extra-small breakpoint. |
| `children` | `Snippet<[BreakpointSnippetParams]>` | Optional. Fallback content used when no breakpoint-specific snippet matches. Receives `{ currentBreakpoint: string }`. |

This excerpt assumes `DesktopBoard` and `MobileBoard` are your existing board components. The `lg`, `md`, `sm` and `xs` props are snippets, one per breakpoint; `children` is the fallback snippet used when no breakpoint snippet matches, and receives the current breakpoint.

```svelte
<script lang="ts">
	import { ResponsiveFlexiBoard } from '@flexiboards/svelte';

	import DesktopBoard from './desktop-board.svelte';
	import MobileBoard from './mobile-board.svelte';
</script>

<ResponsiveFlexiBoard>
	{#snippet lg()}
		<DesktopBoard />
	{/snippet}

	{#snippet xs()}
		<MobileBoard />
	{/snippet}
</ResponsiveFlexiBoard>
```

## ResponsiveFlexiBoardController

You can access the controller via binding to the `controller` prop or using the `onfirstcreate` callback.

**Properties**

| Name | Type | Description |
| --- | --- | --- |
| `currentBreakpoint` (readonly) | `string` | The currently active breakpoint key. |
| `definedBreakpoints` (readonly) | `string[]` | All breakpoint keys that have stored layouts. |
| `configuredBreakpoints` (readonly) | `string[]` | All breakpoint keys from configuration. |

**Methods**

| Name | Type | Description |
| --- | --- | --- |
| `importLayout` | `(layout: ResponsiveFlexiLayout) => void` | Imports layouts for all breakpoints. |
| `exportLayout` | `() => ResponsiveFlexiLayout` | Exports layouts for all breakpoints. |
| `getLayoutForBreakpoint` | `(breakpoint: string) => FlexiLayout \| undefined` | Gets the layout for a specific breakpoint. |
| `setLayoutForBreakpoint` | `(breakpoint: string, layout: FlexiLayout) => void` | Sets the layout for a specific breakpoint. |
| `hasLayoutForBreakpoint` | `(breakpoint: string) => boolean` | Checks if a layout exists for a specific breakpoint. |

## ResponsiveFlexiBoardConfiguration

The configuration object for the `ResponsiveFlexiBoard` component.

**Properties**

| Name | Type | Description |
| --- | --- | --- |
| `breakpoints` | `Record<string, number>` | Optional. Breakpoint definitions mapping breakpoint keys to minimum viewport widths (in pixels). Breakpoints are evaluated in descending order - the largest matching breakpoint wins. Use 'default' as the fallback when no breakpoint matches. |
| `onBreakpointChange` | `(newBreakpoint: string, oldBreakpoint: string) => void` | Optional. Callback fired when the active breakpoint changes. |
| `onLayoutsChange` | `((layouts: ResponsiveFlexiLayout) => void)` | Optional. Callback fired when any layout changes (widget moved, resized, added, or removed). Receives all breakpoint layouts, including the updated current one. Synchronous changes are batched into a microtask, before animations settle. |
| `initialLayouts` | `ResponsiveFlexiLayout` | Optional. Layouts to render from instead of the widgets declared in markup, as a plain value keyed by breakpoint. The active breakpoint's layout is applied during the initial render pass on both the server and the client, like FlexiBoardConfiguration.initialLayout. A configured `loadLayouts` still runs on the client and overrides this. |
| `loadLayouts` | `(() => ResponsiveFlexiLayout \| undefined)` | Optional. Function to load initial layouts on mount. Called once when the responsive board is ready. Not invoked during server rendering. Use `initialLayouts` for layouts the server has. |
| `ssrBreakpoint` | `string` | Optional. The breakpoint to assume while server-rendering, where no media query can match. Pick the most common viewport for the page (usually the desktop breakpoint); the client corrects to the real breakpoint at hydration. Without it, a server render falls back to the 'default' breakpoint. |

## ResponsiveFlexiLayout

A `ResponsiveFlexiLayout` maps breakpoint keys to `FlexiLayout` objects. Entries use the same IDs and registry types as [ordinary stored layouts](https://www.flexiboards.dev/docs/guides/exporting-importing-boards).

This illustrative JSON contains stored layouts for two visited breakpoints:

```json
{
	"lg": { "main": [{ "id": "chart", "type": "chart", "x": 0, "y": 0, "width": 2, "height": 2 }] },
	"default": {
		"main": [{ "id": "chart", "type": "chart", "x": 0, "y": 0, "width": 1, "height": 2 }]
	}
}
```

Layouts are initialized lazily, so only breakpoints that have actually been visited have stored layouts.

## Accessibility

Each child board provides the [keyboard interactions and announcements](https://www.flexiboards.dev/docs/accessibility). Switching breakpoint content can unmount the focused element. The responsive wrapper does not transfer focus to a corresponding widget in the new layout. If your application needs that behavior, track the focused widget's stable ID and restore focus after the replacement board mounts. Avoid moving focus when it was outside the board.