M3 Creating a Mirador plugin

You can use nwb to quickly scaffold a Mirador 3 plugin.

$ npm i -g nwb

$ nwb new react-component mirador-demo-plugin
Creating a react-component project...
? Do you want to create an ES modules build for use by compatible bundlers? Yes
? Do you want to create a UMD build for global usage via <script> tag? Yes
? Which global variable should the UMD build set? MiradorDemo
  create .gitignore
  create .travis.yml
  create CONTRIBUTING.md
  create README.md
  create demo/src/index.js
  create nwb.config.js
  create package.json
  create src/index.js
  create tests/.eslintrc
  create tests/index-test.js
✔ Installing react and react-dom
✔ Initing Git repo

Add mirador as a dev dependency

$ npm i --save-dev mirador@alpha

Make sure that mirador, react and react-dom are peer dependencies.

  "peerDependencies": {
+    "mirador": "^3.0.0-rc.7",
-    "react": "16.x"
+    "react": "16.x",
+    "react-dom": "16.x"
  },
  "devDependencies": {
+    "mirador": "^3.0.0-rc.7",
    "nwb": "0.23.x",

Install dependencies

$ npm install

Plugin Conventions

Mirador plugins have a convention ... add more text here.

Three properties are required: name, target, and mode.

{
  name: 'Demo',
  target: 'WindowTopBarPluginMenu',
  mode: 'add',
}

You can also pass additional properties mapStateToProps and mapDispatchToProps which take a function as a value and work similarly to their counterparts in redux and Mirador.

Default exports

To enable robust functionality, packages may contain multiple plugins that act in concert together. We encourage plugin publishers to publish individual plugins in a package as exports. However, we also recommend publishing the default export as an array of the plugins that are used together. This way they can be more easily imported and used by Mirador users.

Add plugins

Add plugins are only supported for a predefined set of components.

• Window
• BackgroundPluginArea
• WindowTopBarPluginMenu
• WorkspaceControlPanelButtons
• WorkspaceMenu
• WorkspaceOptionsMenu