M3 Embedding in Another Environment

Embedding Mirador

- Until the maintainers deem the documentation has matured and marks so, contents 
- presented here should be considered to be an ongoing collaborative work that will 
- keep changing upon trials and errors.

In an HTML document with JavaScript

With the UMD version of Mirador, the global name Mirador or window.Mirador is exposed for you to use -- see webpack.config.js and src/index.js.

<!-- By default uses Roboto font. Be sure to load this or change the font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<!-- Container element of Mirador whose id should be passed to the instantiating call as "id" -->
<div id="my-mirador"/> 

<script type="text/javascript">
var mirador = Mirador.viewer({
  "id": "my-mirador",
  "manifests": {
    "https://iiif.lib.harvard.edu/manifests/drs:48309543": {
      "provider": "Harvard University"
    }
  },
  "windows": [
    {
      "loadedManifest": "https://iiif.lib.harvard.edu/manifests/drs:48309543",
      "canvasIndex": 2,
      "thumbnailNavigationPosition": 'far-bottom'
    }
  ]
});
</script>

Using Mirador with a plugin

Mirador users wanting to plugins should setup a Webpack or Parcel build and install the mirador and mirador plugin dependencies separately. Examples of basic examples are available here: https://github.com/projectmirador/mirador-integration

As a child component of a React App

Install Mirador from NPM:

npm install mirador@rc

Then you have two options to embed Mirador in a React app.

Approach 1: Build a wrapper around the init function of Mirador

Codesandbox: https://codesandbox.io/s/react-example-0uwig

import React, { Component } from "react";
import mirador from "mirador";

class Mirador extends Component {
  componentDidMount() {
    const { config, plugins } = this.props;
    mirador.viewer(config, plugins);
  }

  render() {
    const { config } = this.props;
    return <div id={config.id} />;
  }
}

Approach 2: Import and assemble Mirador components directly

Codesandox: https://codesandbox.io/s/react-example-jmkpc

import React from 'react';
import { Provider } from 'react-redux'
import PluginProvider from 'mirador/dist/es/src/extend/PluginProvider';
import MiradorApp from 'mirador/dist/es/src/containers/App'
import createStore from 'mirador/dist/es/src/state/createStore'
import createRootReducer from 'mirador/dist/es/src/state/reducers/rootReducer';
import settings from 'mirador/dist/es/src/config/settings'
import * as actions from 'mirador/dist/es/src/state/actions'


class Mirador extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  componentWillMount() {
    const store = createStore()
    settings.theme.palette.type = 'dark'
    store.dispatch(actions.setConfig(settings))
    store.dispatch(actions.setWorkspaceAddVisibility(true))
    this.setState({ store: store })
  }

  render() {
    return (
      <Provider store={this.state.store}>
        <PluginProvider plugins={[]} createRootReducer={createRootReducer}>
          <MiradorApp/>
        </PluginProvider>
      </Provider>
    )
  }
}

The above snippet just shows that you need to pass a redux store with some initialization to the Mirador App container. You may want to keep the store in a place where it won't get re-created each time the parent component re-renders itself.

Notes

• Using a different version of react-redux in the parent application than the one used by Mirador can lead to problems. For example, you could get an error that looks like

  Invariant Violation: Could not find "store" in either the context or props of "Connect(...)". Either wrap 
  the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(...)".
  

Styling Issues

Positioning Mirador

Currently when Mirador is instantiated its root element is a <div class="fullscreen"> with a default (static) positioning. Since, however, its child <main> uses position: absolute, you need to change the position setting of the parent to relative for the child to occupy the proper space within the parent. You should also make sure the height of all its ancestors are set appropriately to reserve the viewable area. For example, you may have to set height: 100% for elements from <html> all the way down to the Mirador's root element.