@react-pdf-kit/polyfills
v1.0.0
Published
Polyfills for react-pdf-kit
Downloads
1,462
Readme
@react-pdf-kit/polyfills
@react-pdf-kit/polyfills fills the gaps in certain browser APIs that older browsers are missing, running before any viewer code executes. It's shipped as a separate package so it can be versioned independently from @react-pdf-kit/viewer.
Browser support
Loading the polyfills package supports the following browsers:
| Chrome | Firefox | Edge | Safari | Safari iOS | Chrome Android | | ------ | ------- | ---- | ------ | ---------- | -------------- | | 119+ | 93+ | 119+ | 18.3+ | 18.3+ | 119+ |
To support older browser versions than the table above, pair the polyfills with the legacy PDF.js worker. The Override the PDF.js Worker guide in the docs covers the setup.
Installation
npm install @react-pdf-kit/polyfills
# or
pnpm add @react-pdf-kit/polyfills
# or
yarn add @react-pdf-kit/polyfills
# or
bun add @react-pdf-kit/polyfillsUsage
React (Vite / Webpack / CRA)
Import the package at the very top of your entry file, before any other imports. It's a side-effect import that runs synchronously, so placing it first guarantees the polyfills are in place before any code that depends on the patched APIs runs.
import "@react-pdf-kit/polyfills";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);Next.js
A bare import "@react-pdf-kit/polyfills" will not run in Next.js. Next.js replaces polyfill imports with its own built-in polyfills at compile time, so the import is stripped before it executes.
The workaround is to serve the bundle as a static file and load it with <Script strategy="beforeInteractive">, which runs before hydration and bypasses the substitution. Copy the bundle in next.config.mjs:
import { copyFileSync } from "fs";
import { resolve } from "path";
copyFileSync(
resolve(__dirname, "node_modules/@react-pdf-kit/polyfills/dist/index.cjs.js"),
resolve(__dirname, "public/polyfills.js"),
);
/** @type {import('next').NextConfig} */
const nextConfig = {
// ...your config
};
export default nextConfig;Then load it from your root layout:
import Script from "next/script";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Script src="/polyfills.js" strategy="beforeInteractive" />
{children}
</body>
</html>
);
}See Legacy Browser Support for the full Next.js walkthrough.
Documentation
- Legacy Browser Support: The full guide this package is part of, including the Next.js setup and the legacy worker method
- Getting Started: Tnstall and render your first PDF with
@react-pdf-kit/viewer @react-pdf-kit/viewer: The main viewer package
License
This package is part of React PDF Kit and is governed by the same license as @react-pdf-kit/viewer. See that package for license details.