What is React PDF Highlighter?

As the name suggests, React PDF Highlighter is a way to create and annotate PDFs. Unfortunately, at time of writing there isn’t support for React 18 and Next.js 13 in main.There’s an active PR up at time of writing (courtesy joebutler2) but it’s still being reviewed.I thought I’d detail the process I took to get an example up and running in case it’s useful for anyone else out there. For context, I am on an M2 Silicon Macbook Air.

Installing From Github Registry

Follow this guide in order to set up Github registry

npm login --scope=credolabs --auth-type=legacy --registry=https://npm.pkg.github.com

You will be prompted for your Github username and a Github token. To obtain the Github token go to Settings > Developer Setings > Personal Access Tokens.

You can confirm that setup was successful by checking ~/.npmrc

Adding the package

Thereafter, chuck this line into your package.json:

"@credolabs/react-pdf-highlighter": "5.6.7"

and then run npm install or equivalent for the package manager you are using.

Canvas error

If you run npm run dev thereafter you might get an error about the lack of a canvas package. Installing canvas will give you another error about an invalid symbol. You can run the magic snippet obtained from this source

brew install pkg-config cairo pango libpng jpeg giflib librsvg

and try installing again - this should hopefully resolve this issue.

Thereafter head to your next.config.js and slot this in:

modules.exports = {
     webpack: (config) => { config.externals.push({ sharp: 'commonjs sharp', canvas: 'commonjs canvas' }); return config }
     ...
}

Getting a basic example up and running

Edit page.tsx and chuck examples/src/App.tsx in. Do the following:

1. Substitute all references to /react-pdf-highlighter to import from @credolabs/react-pdf-highlighter instead.
2. Add “use client” at the top of App.tsx.
3. Go to test_highlights file and dump it into App.tsx
4. Install jsdom if you run into errors about window
5. Copy App.css from the examples into app/style/App.css
6. Move over examples/Sidebar.tsx into app/Sidebar.tsx
7. Delete the Spinner component or copy it over from examples

At this point there might be some warnings about window but you should generally be good to go. Hope this helps in some way and feel free to comment if you run into any issues