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 PDF engine, manages its loading state, and provides you with a ready-to-use engine instance. The engine is fully initialized when returned—no additional setup required.

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

import { usePdfiumEngine } from '@embedpdf/engines/react';
 
export const PDFProcessor = () => {
  const { engine, isLoading, error } = usePdfiumEngine();
 
  if (error) {
    return <div>Error: {error.message}</div>;
  }
 
  if (isLoading || !engine) {
    return <div>Loading PDF Engine...</div>;
  }
 
  // Engine is ready to use immediately!
  return (
    <div>
      <p>PDF Engine is ready to use!</p>
      {/* You can now pass the `engine` prop to other components */}
    </div>
  );
};