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-alpha.7",
-    "react": "16.x"
+    "react": "16.x",
+    "react-dom": "16.x"
  },
  "devDependencies": {
+    "mirador": "^3.0.0-alpha.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.

Add plugins

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

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