Small updates + README

src/canvas-panel/index.tsx

@@ -10,8 +10,6 @@ import { VaultProvider } from '../context/VaultContext';
 import { useManifest } from '../hooks/useManifest';
 import { useVisibleCanvases } from '../context/VisibleCanvasContext';
 import { CanvasContext } from '../context/CanvasContext';
-import { ViewerControls } from '../demo/viewer-controls';
-import { MediaControls } from '../demo/media-controls';
 import { useExistingVault } from '../hooks/useExistingVault';
 import { SimpleViewerContext } from '../viewers/SimpleViewerContext.types';
 import { Audio, AudioHTML } from './render/Audio';
@@ -42,20 +40,19 @@ interface CanvasPanelProps {
   annotations?: ReactNode;
 }
 
-const Inner = forwardRef(function Inner(
-  props: {
-    height?: number;
-    canvasProps?: CanvasPanelProps['canvasProps'];
-    spacing?: number;
-    components?: CanvasPanelProps['components'];
-    children?: ReactNode;
-    annotations?: ReactNode;
-    header?: ReactNode;
-    reuseAtlas?: boolean;
-    mode?: ViewerMode;
-  },
-  ref
-) {
+interface InnerProps {
+  height?: number;
+  canvasProps?: CanvasPanelProps['canvasProps'];
+  spacing?: number;
+  components?: CanvasPanelProps['components'];
+  children?: ReactNode;
+  annotations?: ReactNode;
+  header?: ReactNode;
+  reuseAtlas?: boolean;
+  mode?: ViewerMode;
+}
+
+const Inner = forwardRef<SimpleViewerContext, InnerProps>(function Inner(props, ref) {
   const manifest = useManifest();
   const canvases = useVisibleCanvases();
   const viewer = useSimpleViewer();
@@ -116,19 +113,8 @@ type CanvasPanelType = ForwardRefExoticComponent<CanvasPanelProps & RefAttribute
   ModelHTML: typeof ModelHTML;
 };
 
-export const CanvasPanel = forwardRef(function CanvasPanel(
-  {
-    children,
-    height,
-    annotations,
-    canvasProps,
-    spacing,
-    header,
-    components,
-    mode,
-    reuseAtlas,
-    ...props
-  }: CanvasPanelProps,
+export const CanvasPanel = forwardRef<SimpleViewerContext, CanvasPanelProps>(function CanvasPanel(
+  { children, height, annotations, canvasProps, spacing, header, components, mode, reuseAtlas, ...props },
   ref
 ) {
   const vault = useExistingVault();

src/hooks/useExistingVault.ts

@@ -1,9 +1,13 @@
-import { globalVault } from '@iiif/helpers/vault';
+import { globalVault, Vault } from '@iiif/helpers/vault';
 import { useContext } from 'react';
 import { ReactVaultContext } from '../context/VaultContext';
 
-export function useExistingVault() {
+export function useExistingVault(vault?: Vault): Vault {
   const oldContext: any = useContext(ReactVaultContext);
 
+  if (vault) {
+    return vault;
+  }
+
   return oldContext && oldContext.vault ? (oldContext.vault as any) : globalVault();
 }

src/hooks/useExternalResource.ts

@@ -1,4 +1,4 @@
-import { useVault } from './useVault';
+import { useExistingVault } from './useExistingVault';
 import { useEffect, useMemo, useState } from 'react';
 
 export type ResourceRequestOptions = {
@@ -17,7 +17,7 @@ export function useExternalResource<T extends { id: string }>(
   resource?: T;
 } {
   const id = typeof idOrRef === 'string' ? idOrRef : idOrRef.id;
-  const vault = useVault();
+  const vault = useExistingVault();
   const [realId, setRealId] = useState(id);
   const [error, setError] = useState<Error | undefined>(undefined);
   const initialData = useMemo(() => {

src/viewers/SimpleViewerContext.tsx

@@ -71,6 +71,8 @@ import { useManifest } from '../hooks/useManifest';
 import { SimpleViewerContext, SimpleViewerProps } from './SimpleViewerContext.types';
 import { RangeContext } from '../context/RangeContext';
 import { useCanvasSequence } from './SimpleViewerContext.hooks';
+import { VaultProvider } from '../context/VaultContext';
+import { useExistingVault } from '../hooks/useExistingVault';
 
 const noop = () => {
   //
@@ -146,6 +148,7 @@ export function InnerViewerProvider(props: SimpleViewerProps) {
 }
 
 export function SimpleViewerProvider(props: SimpleViewerProps) {
+  const vault = useExistingVault(props.vault);
   const manifest = useExternalManifest(props.manifest);
 
   if (!manifest) {
@@ -164,9 +167,11 @@ export function SimpleViewerProvider(props: SimpleViewerProps) {
   const inner = <InnerViewerProvider {...props}>{props.children}</InnerViewerProvider>;
 
   return (
-    <ManifestContext manifest={manifest.id}>
-      {props.rangeId ? <RangeContext range={props.rangeId}>{inner}</RangeContext> : inner}
-    </ManifestContext>
+    <VaultProvider vault={vault}>
+      <ManifestContext manifest={manifest.id}>
+        {props.rangeId ? <RangeContext range={props.rangeId}>{inner}</RangeContext> : inner}
+      </ManifestContext>
+    </VaultProvider>
   );
 }
 

src/viewers/SimpleViewerContext.types.ts

@@ -1,3 +1,4 @@
+import { Vault } from '@iiif/helpers/vault';
 import { Reference } from '@iiif/presentation-3';
 import { ReactNode } from 'react';
 
@@ -15,6 +16,7 @@ export type SimpleViewerContext = {
 };
 
 export type SimpleViewerProps = {
+  vault?: Vault;
   manifest: string;
   pagingEnabled?: boolean;
   children: ReactNode;