# Layout Manager

Source: https://developers.inkdrop.app/modules/layout-manager

Associates React components with layouts.

Available as `env.layouts` on the [Environment](https://developers.inkdrop.app/modules/environment) passed to `activate(env)`.

---

## Registering and unregistering a React component

You can register your React component classes to the [component registry][component-manager].
Then, the registered components can be added to layouts.
Below example registers `MyDialog` class to the component registry and adds it to `modal` layout so that you can show it as a modal view.

```ts
import type { Environment, IInkdropPlugin } from '@inkdropapp/types'

class YourPlugin implements IInkdropPlugin {
  activate(env: Environment) {
    env.components.registerClass(MyDialog)
    env.layouts.addComponentToLayout('modal', 'MyDialog')
  }

  deactivate(env: Environment) {
    env.layouts.removeComponentFromLayout('modal', 'MyDialog')
    env.components.deleteClass(MyDialog)
  }
}

export default new YourPlugin()
```

This is described in detail in the [Word Count plugin](https://developers.inkdrop.app/guides/plugin-word-count#developing-your-plugin) walkthrough.

Available layouts can be found [here](https://developers.inkdrop.app/states/layouts).

---

## Event Subscription `onLayoutChange(name, callback)`

Invokes the given callback when the layout with given name is changed.

### Parameters

- **layoutName** (string, required)

  A layout name.
- **callback** ((components: Array\<string>) => void, required)

  A function which is called with an array of React component class names

### Returns

Returns a [Disposable](https://developers.inkdrop.app/event-subscription/disposable) on which `.dispose()` can be called to unsubscribe.

```js
env.layouts.onLayoutChange(
  'modal',
  (components) => console.log(components)
);
```

---

## Add a component to a layout `addComponentToLayout(layoutName, componentClassName)`

Adds a component to specified layout.

### Parameters

- **layoutName** (string, required)

  A layout name.
- **componentClassName** (string, required)

  A React component class name which is registered in the [component registry][component-manager]

```js
env.layouts.addComponentToLayout('modal', 'MyDialog')
```

---

## Add a component to a layout before another `insertComponentToLayoutBefore(layoutName, referenceComponentClassName, componentClassNameToInsert)`

Inserts a component before the reference component to specified layout.

### Parameters

- **layoutName** (string, required)

  A layout name.
- **referenceComponentClassName** (string, required)

  A React component class name before which `componentClassName` is inserted.
- **componentClassNameToInsert** (string, required)

  A React component class name which is registered in the [component registry][component-manager].

```js
env.layouts.insertComponentToLayoutBefore(
  'modal',
  'MySecondDialog', 'MyDialog'
)
```

---

## Add a component to a layout after another `insertComponentToLayoutAfter(layoutName, referenceComponentClassName, componentClassNameToInsert)`

Inserts a component after the reference component to specified layout.

### Parameters

- **layoutName** (string, required)

  A layout name.
- **referenceComponentClassName** (string, required)

  A React component class name after which `componentClassName` is inserted.
- **componentClassNameToInsert** (string, required)

  A React component class name which is registered in the [component registry][component-manager].

```js
env.layouts.insertComponentToLayoutAfter(
  'modal',
  'MyDialog',
  'MySecondDialog'
)
```

---

## Get components names from layout `getLayout(name)`

Returns a set of components of the specified layout.

### Parameters

- **name** (string, required)

  A name of the layout to get.

### Return values

An array of React component class names.

```js
env.layouts.getLayout('modal')
```

---

## Get components from layout `getLayoutComponents(name)`

Returns a set of React component classes of the specified layout.

### Parameters

- **name** (string, required)

  A name of the layout to get.

### Return values

An array of React component classes.

```js
env.layouts.getLayoutComponents('modal')
```

---

## Get index of component in layout `indexOfComponentInLayout(layoutName, componentClassName)`

Returns the first index at which a given component can be found in the specified layout, or `-1` if cannot found.

### Parameters

- **layoutName** (string, required)

  A layout name.
- **componentClassName** (string, required)

  A React component class name to search.

### Return values

Index of the component in the layout

```js
env.layouts.indexOfComponentInLayout('modal', 'MyDialog')
```

---

## Remove a component from a layout `removeComponentFromLayout(layoutName, componentClassName)`

Removes a component from specified layout.

### Parameters

- **layoutName** (string, required)

  A layout name.
- **componentClassName** (string, required)

  A React complonent class name which is registered in the [component registry][component-manager].

```js
env.layouts.removeComponentFromLayout('modal', 'MyDialog')
```

---

## Overwrite the components of a layout `setLayout(name, components)`

Sets a set of components to the specified layout

### Parameters

- **name** (string, required)

  A layout name.
- **components** (Array\<string>, required)

  An array of component class names.

```js
env.layouts.setLayout('modal', ['MyDialog'])
```

[component-manager]: https://developers.inkdrop.app/modules/component-manager