Viewer

<Viewer> renders the Clover IIIF viewer so you can embed a manifest or collection anywhere in MDX. It will render client-side, supports deep zoom, audio, and video, and inherits the project-wide viewer defaults.

<Viewer iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/0b2b8793-d4c7-4a55-8b53-61bfc54bc908?as=iiif" />

Props

Prop	Type	Required	Notes
`iiifContent`	string	✅	IIIF Manifest or Collection URL.
`options`	object		Merged with Canopy’s defaults before passing into Clover.
`className`	string		Adds classes to the viewer container.
`height`	string		CSS height override for the viewport.

Options

The options prop allows you to customize Clover viewer features on a per-instance basis. Adding this will override the default options set in Canopy. For further information on available options, see the Clover Viewer documentation.

Information Panel

Toggle Clover controls through the options prop. Here we render the manifest title, set the information panel to the open state and surface the “About” tab.

<Viewer  iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/0b2b8793-d4c7-4a55-8b53-61bfc54bc908?as=iiif"  options={{    showTitle: true,    informationPanel: {      open: true,      renderAbout: true,    },  }}/>

Collections

The Clover viewer also supports IIIF Collections. Feed any valid IIIF Collection URL into the iiifContent prop. You can navigate between manifests in the collection using the viewer’s built-in collection browser.

Below is an example using a collection generated by the Canopy build process for genre facet values of lithographs: https://canopy-iiif.github.io/app/api/facet/genre/lithographs.json

Example: lithographs

An example showing all items of the genre value lithographs in the Canopy demo repository.

### Example: lithographs An example showing all lithographs in the Canopy demo repository. <Viewer iiifContent="https://canopy-iiif.github.io/app/api/facet/genre/lithographs.json" />