The Most Advanced React PDF Viewer

In this video, I show you how to build a modern and powerful PDF Viewer using React, TypeScript, and Vite. You’ll learn how to implement search, programmatic keyword highlights, jump-to-next highlight logic, sidebar navigation, and how to overlay custom elements or BBOX highlights on top of PDF pages.

🛠️ Tools & Packages Used:
@pdf-viewer/react:
https://www.react-pdf.dev
React + Vite:
https://vitejs.dev/
Tailwind CSS:
https://tailwindcss.com/

⏱️ Timestamps:
00:00 - Introduction
01:24 - Project Setup (React + TypeScript + Vite)
02:00 - Install and Setup @pdf-viewer/react
05:07 - Install and Setup Tailwind css
06:24 - Implementing PDF Viewer Base Component
08:54 - Adding Search with useSearchContext
18:46 - Keyword Highlighting (useHighlightContext)
23:56 - Highlight Sidebar Component (usePaginationContext)
32:25 - Using useElementPageContext (Custom Overlays)
43:04 - BBOX Highlight Rendering (useElementPageContext)

🌐 Check out more content:
My Portfolio: https://www.cand.site/
Medium: https://medium.com/@ckriswinarto

💻 Get the Source Code:
GitHub: https://github.com/candraKriswinarto/my-pdf-viewer

🌐 Recommended Digital Tools (Affiliate Links):
Hostinger: Get 20% Off on Web Hosting — https://dub.sh/zrpWarU

👍 If you found this video helpful, please like and subscribe!
❓ Any questions? Drop them in the comments below!

#Coding #WebDevelopment #ReactJS #Vite #PDFViewer #JavaScript #TypeScript #FrontendDevelopment #ReactPDF

Видео The Most Advanced React PDF Viewer канала Cand Dev