# Mounting

**Initializes the server-rendered components of a page on the client.**

`mountAll` mounts every instance of a component, `mount` one instance you pick by its `rootId`. Both read the props from the [hydration data](/docs/core-concepts/hydration.md#content-the-hydration-registry) the server wrote.

## Usage

Call `mountAll` in your entry file. Its first argument is `namespace:name`: the Fluid namespace your component collection is registered under (see [Getting Started](/docs/getting-started.md)), followed by the component's name:

```typescript
import { mountAll } from 'fluid-primitives';
import { Accordion } from 'fluid-primitives/accordion';

mountAll('primitives:accordion', ({ props }) => new Accordion(props).init());
```

`mountAll` calls your callback once per accordion on the page. `new Accordion(props)` stores the props. `init()` builds the state machine, renders and starts it, and returns the instance, so the callback can return it directly. Read `instance.machine`, `instance.api` and `instance.hydrator` after `init()`, an earlier read throws.

The namespace is required because two component collections can register a component with the same name, and `mountAll` and `mount` throw without it.

### Mount one instance yourself

`mountAll` mounts every instance on its own. To mount one yourself, for example to pass callbacks, set `autoMount="{false}"` on the root:

```html
<ui:collapsible.root autoMount="{false}" rootId="shipping-details"> ... </ui:collapsible.root>
```

Then call `mount` with the `rootId`. It mounts that instance whatever its `autoMount` value:

```typescript
import { mount } from 'fluid-primitives';
import { Collapsible } from 'fluid-primitives/collapsible';

const collapsible = mount('ui:collapsible', 'shipping-details', ({ props }) =>
    new Collapsible({
        ...props,
        onOpenChange: ({ open }) => {
            localStorage.setItem('shipping-details-open', String(open));
        },
    }).init()
);
```

`mount` creates a new instance on every call, so call `destroy()` on the old one before you mount the same `rootId` again. `getComponentInstance` and `destroyComponentsWithin` find an instance from `mount` like one from `mountAll`.

## mountAll

Mounts every instance of a component that is not mounted yet and was not rendered with `autoMount="{false}"`. It is safe to call more than once, e.g. after lazily inserted DOM adds new instances: mounted ones are skipped.

The `props` in the callback are typed from `componentName` via `HydrationPropsFor`. A component without generated types gets an untyped bag.

```typescript
mountAll<K extends KnownComponentName | (string & {})>(componentName: K, callback: (data: { autoMount: boolean; props: HydrationPropsFor<Extract<K, string>>; createHydrator: () => ComponentHydrator; }) => Component<unknown, unknown> | void): void
```

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `componentName` | `K` | Yes | `-` | The namespaced name, e.g. `ui:select`. |
| `callback` | `(data: { autoMount: boolean; props: HydrationPropsFor<Extract<K, string>>; createHydrator: () => ComponentHydrator; }) => Component<unknown, unknown> \| void` | Yes | `-` | Creates the instance of one hydration entry and returns it. |

```typescript
mountAll('ui:accordion', ({ props }) => new Accordion(props).init());
```

## mount

Mounts one instance by its `rootId`, also one that was rendered with `autoMount="{false}"`. Unlike `mountAll()`, it creates a new instance on every call, which then replaces the one tracked before. `getComponentInstance()` and `destroyComponentsWithin()` find it like any other.

The `props` in the callback are typed like those of `mountAll()`.

```typescript
mount<K extends KnownComponentName | (string & {}), T extends Component<unknown, unknown>>(componentName: K, rootId: string, callback: (data: { autoMount: boolean; props: HydrationPropsFor<Extract<K, string>>; createHydrator: () => ComponentHydrator; }) => T | void): T | undefined
```

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `componentName` | `K` | Yes | `-` | The namespaced name, e.g. `ui:dialog`. |
| `rootId` | `string` | Yes | `-` | The `rootId` the component was rendered with. |
| `callback` | `(data: { autoMount: boolean; props: HydrationPropsFor<Extract<K, string>>; createHydrator: () => ComponentHydrator; }) => T \| void` | Yes | `-` | Creates the instance and returns it. |

**Returns** `T | undefined`. The instance, or `undefined` if there is no hydration entry for `rootId`.

## getComponentInstance

Finds a component instance that is already mounted, by the namespaced name it was mounted with and its hydration id (the `id` prop it was rendered with). Works for instances from `mountAll()` and `mount()` alike. It is for primitives that compose two independent instances of themselves at runtime, e.g. the submenus of a Menu.

```typescript
getComponentInstance<T extends Component<unknown, unknown> = Component<unknown, unknown>>(componentName: string, id: string): T | undefined
```

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `componentName` | `string` | Yes | `-` | The namespaced name, e.g. `ui:menu`. |
| `id` | `string` | Yes | `-` | The hydration id of the instance. |

**Returns** `T | undefined`. The instance, or `undefined` if none is mounted under that id.

## destroyComponentsWithin

Destroys every mounted instance whose root element is `root` or inside it, and forgets it. Call it before you remove a subtree from the DOM, e.g. a row of a FieldArray.

Only the `root` part of an instance counts. A component without one, such as Dialog, is never matched.

```typescript
destroyComponentsWithin(root: Element | Document): void
```

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `root` | `Element \| Document` | Yes | `-` | The element that is about to be removed. |