Using with React

While @embedpdf/engines is a framework-agnostic library, it includes a dedicated React hook, usePdfiumEngine, to simplify integration and manage the engine’s lifecycle within your components.

This is the recommended way to get started with EmbedPDF in a React application.

Installation

The usePdfiumEngine hook is included directly within the main package.


npm install @embedpdf/engines


pnpm add @embedpdf/engines


yarn add @embedpdf/engines


bun add @embedpdf/engines

The `usePdfiumEngine` Hook

This hook handles the creation of the WebWorkerEngine, manages its loading and initialization state, and provides you with a ready-to-use engine instance.

Here’s a basic example of how to use it in a component:

PDFProcessor.tsx


import { usePdfiumEngine } from '@embedpdf/engines/react';
import { useEffect, useState } from 'react';
 
export const PDFProcessor = () => {
  const { engine, isLoading, error } = usePdfiumEngine();
  const [isReady, setIsReady] = useState(false);
 
  useEffect(() => {
    // The engine object from the hook needs to be initialized once.
    if (engine && !isReady) {
      engine.initialize().toPromise().then(() => setIsReady(true));
    }
  }, [engine, isReady]);
 
  if (error) {
    return <div>Error: {error.message}</div>;
  }
 
  if (isLoading || !isReady) {
    return <div>Initializing PDF Engine...</div>;
  }
 
  // Once isLoading is false and isReady is true, the engine is ready!
  return (
    <div>
      <p>PDF Engine is ready to use!</p>
      {/* You can now pass the `engine` prop to other components */}
    </div>
  );
};

Using with React

Installation

The usePdfiumEngine Hook

Need Help?

The `usePdfiumEngine` Hook