Add Create React App example with TypeScript and basic usage

examples/create-react-app/src/app.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Pdf from './pdf';
+
+export default function App () {
+  return (
+    <main>
+      <h1>PDF.js rendering example with Create React App</h1>
+      <Pdf />
+    </main>
+  )
+}

examples/create-react-app/src/index.css

@@ -0,0 +1,11 @@
+html {
+  text-align: center;
+}
+
+canvas {
+  border: 1px dashed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+}

examples/create-react-app/src/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+
+import './index.css';
+
+ReactDOM.render(<App />, document.getElementById('root'));

examples/create-react-app/src/pdf.tsx

@@ -0,0 +1,62 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import pdfjs from 'pdfjs-dist';
+import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
+
+pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+
+const PdfComponent = ({ src }) => {
+  const canvasRef = useRef(null)
+
+  useEffect(() => {
+    const fetchPdf = async () => {
+      const loadingTask = pdfjs.getDocument(src);
+
+      const pdf = await loadingTask.promise;
+
+      const firstPageNumber = 1;
+
+      const page = await pdf.getPage(firstPageNumber);
+
+      const scale = 1.5;
+      const viewport = page.getViewport({scale: scale});
+
+      // Prepare canvas using PDF page dimensions
+      const canvas = canvasRef.current;
+
+      const context = canvas.getContext('2d');
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+
+      // Render PDF page into canvas context
+      const renderContext = {
+        canvasContext: context,
+        viewport: viewport
+      };
+      const renderTask = page.render(renderContext);
+
+      await renderTask.promise;
+    };
+
+    fetchPdf();
+  }, [src]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={window.innerWidth}
+      height={window.innerHeight}
+    />
+  );
+}
+
+PdfComponent.propTypes = {
+  src: PropTypes.string
+};
+
+PdfComponent.defaultProps = {
+  src: `${process.env.PUBLIC_URL}/helloworld.pdf`
+};
+
+export default PdfComponent;

examples/create-react-app/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />