@plone/volto/src/components/manage/Pluggable/Pluggable.mdx

Volto

## Overview

The Pluggables components give you insertion points to push components to other
components in an "out of tree" fashion, similar to React's `<Portal>` component.

To understand it, let's look at the architecture:

- First, we need to wrap all of our React component tree in a PluggablesProvider:

```
<PluggablesProvider>
  ...
</PluggablesProvider>
```

This Provider acts like a centralized place where "insertion points" and
"plugins to the insertion points" can be can be registered.

Now, somewhere inside the children tree of PluggablesProvider, we can create some
"insertion points":

```
<Pluggable name="left-column" />
```

And now we can simply plug things as children to the `<Pluggable>` with some `<Plug>`
component:

```
<Plug pluggable="left-column" id="navigation">relevant nav stuff</Plug>
```

Declaring a `<Plug>` with the same id two times will make the second one (in
terms of rendering order) replace the first one.

Internally, the `<PluggablesProvider>` keeps record of Pluggables and Plug and
this is achieved by having the `<Pluggables>` and `<Plug>` components register
themselves with the Provider via React context.

### Customize how the plugs are rendered

You can customize how the pluggables are rendered. The Pluggable component can
take a function as a child, use that function to describe how the pluggables
are rendered.

```js
<Pluggable name="block-toolbar">
{(pluggables) => pluggables.map(p => <div>{p}</div>)
</Pluggable>
```

### Passing parameters from the Pluggable to the Plugs

You can also pass options to the Plugs, to enable inter-component communication:

```
<Pluggable name="block-toolbar" params={...blockProps} />
```

To use the passed params, you can do:

```
<Plug pluggable="block-toolbar" id="style">
{({options}) => {
  console.log(options);
  return <Button>Clickme</Button>
}}
</Plug>
```