Embedding in Another Environment

Embedding Mirador

In an HTML document with JavaScript

With the CJS version of Mirador, the global name Mirador or window.Mirador is exposed for you to use.

<!-- 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 4)

More on plugins, and a link to updated mirador-integration repo, coming soon.

Here is a basic template:

// Import Mirador from node_modules
import Mirador from 'mirador';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
Mirador.viewer({
    id: 'demo',
    windows: [{
        imageToolsEnabled: true,
        imageToolsOpen: true,
        manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
    }],
    theme: {
        palette: {
            primary: {
                main: '#1967d2',
            },
        },
    },
});

Using Mirador with a plugin (Mirador 3)

Mirador users wanting to integrate plugins should 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

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

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

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 (Mirador 3)

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.