Architecture overview 3: Wrap plugins

Wrap plugins

Wrap plugins allow you to decorate or modify core Mirador components by wrapping them with Higher-Order Components (HOCs). They could be used to:

• Inject context providers
• Add behavior like logging or analytics
• Modify props or override functionality before rendering

Wrap plugins are not rendered inside components like add plugins — instead, they wrap the entire component externally at the container level. Wrap plugins are registered under the wrap key in the PluginContext, and applied at the container level.

Mirador uses the HOC factory function withPlugins(targetName) to apply all registered wrap plugins for a component.

Key elements:

• PluginContext – Same context as with add plugins. Wrap plugins are stored under a different key:

{
  CanvasInfo: {
    wrap: [
      { component: MyCanvasInfoWrapper }
    ]
  }
}

• withPlugins(targetName) – An HOC that wraps the target component with all wrap plugins registered under that targetName.

Wrap plugins receive:

Prop	Description
targetProps	All props passed to the original component
TargetComponent	The unwrapped component class/function
children	The original rendered component

Usage

In /src/containers/CanvasInfo.js, the container wraps the component with both Redux connect() and withPlugins():

const enhance = compose(
  connect(mapStateToProps),
  withPlugins('CanvasInfo')
);

export default enhance(CanvasInfo);

This means:

• CanvasInfo will be enhanced with props from Redux
• Any plugin registered under CanvasInfo.wrap will be applied as wrappers around the component