use-html-reader.tsx

import React from 'react';
import { useHtmlReader } from '../src';
import { Injectable } from '../src/Readium/Injectable';
import { WebpubManifest } from '../src/types';
import Footer from '../src/ui/Footer';
import Header from '../src/ui/Header';

type HTMLReaderProps = {
  injectablesReflowable: Injectable[];
  webpubManifestUrl: string;
  manifest: WebpubManifest;
};

/**
 * This sample shows setting how to use the useHTMLReader hook
 * to render EPUBs. Use it when you know you're _not_ going to be
 * opening PDFs.
 */
const UseHtmlReader: React.FC<HTMLReaderProps> = ({
  injectablesReflowable,
  webpubManifestUrl,
  manifest,
}) => {
  const reader = useHtmlReader({
    webpubManifestUrl,
    manifest,
    injectablesReflowable,
  });
  const containerRef = React.useRef<HTMLDivElement>(null);

  if (!reader || !reader.type) {
    return null;
  }

  return (
    <div>
      <Header
        {...reader}
        headerLeft={<a href="/">Back</a>}
        containerRef={containerRef}
      />
      {reader.content}
      <Footer {...reader} />
    </div>
  );
};

export default UseHtmlReader;