🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@react-pdf-kit/polyfills

Package Overview
Dependencies
Maintainers
3
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-pdf-kit/polyfills - npm Package Compare versions

Comparing version
1.0.0-rc.0
 to
1.0.0-rc.1
+2
-1
package.json
{
"name": "@react-pdf-kit/polyfills",
"version": "1.0.0-rc.0",
"version": "1.0.0-rc.1",
"type": "module",

@@ -9,2 +9,3 @@ "description": "Polyfills for react-pdf-kit",

"types": "./dist/index.d.ts",
"license": "See LICENSE in https://www.npmjs.com/package/@react-pdf-kit/viewer",
"exports": {

@@ -11,0 +12,0 @@ ".": {

+77
-7
README.md
# @react-pdf-kit/polyfills
`@react-pdf-kit/polyfills` package is used to fill in gaps of certain functions in older browsers before any viewer code runs. The bundle is kept in a separate package so it can be versioned independently from the viewer.
`@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`](https://www.npmjs.com/package/@react-pdf-kit/viewer).
Browser polyfills required by [`@react-pdf-kit/viewer`](https://www.npmjs.com/package/@react-pdf-kit/viewer) and `pdfjs-dist` 5.x. Extends support to browsers that lack modern APIs needed for PDF rendering.
## 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](https://react-pdf-kit.com/docs/usage-guide/legacy-browser-support.html#override-the-pdfjs-worker) guide in the docs covers the setup.
## Installation

@@ -14,2 +22,4 @@

# or
yarn add @react-pdf-kit/polyfills
# or
bun add @react-pdf-kit/polyfills

@@ -20,13 +30,73 @@ ```

Import once at the top of your app entry point, before any PDF rendering code:
### 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.
```ts
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>,
);
```
For more detail: [Legacy Browser Support](https://react-pdf-kit.com/docs/usage-guide/legacy-browser-support.html)
### Next.js
## Requirements
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.
- Browser environment — the `CanvasRenderingContext2D` polyfill is a no-op in Node/SSR
- TypeScript 5+ (optional — works in plain JavaScript too)
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`:
```js
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:
```tsx
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](https://react-pdf-kit.com/docs/usage-guide/legacy-browser-support.html) for the full Next.js walkthrough.
## Documentation
- **[Legacy Browser Support](https://react-pdf-kit.com/docs/usage-guide/legacy-browser-support.html):** The full guide this package is part of, including the Next.js setup and the legacy worker method
- **[Getting Started](https://react-pdf-kit.com/docs/getting-started.html):** Tnstall and render your first PDF with `@react-pdf-kit/viewer`
- **[`@react-pdf-kit/viewer`](https://www.npmjs.com/package/@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`](https://www.npmjs.com/package/@react-pdf-kit/viewer). See that package for license details.