Syncfusion Feedback
Choose Framework
Controls
  • Grids
    • Data Grid
    • Pivot Table
    • Tree Grid
    • Spreadsheet
  • Data Visualization
    • Chart
    • Bullet Chart
    • Kanban Board
    • Range Selector
    • Sparkline Charts
    • HeatMap Chart
    • TreeMap
    • Circular Gauge
    • Stock Chart
    • Linear Gauge
    • Smith Chart
    • Maps
    • Diagram
    • 3D Circular Charts
    • 3D Charts
    • Barcode Generator
  • Editors
    • Word Processor
    • Rich Text Editor
    • Image Editor
  • Buttons
    • Button
    • Progress Button
    • Chips
  • Calendars
    • Scheduler
    • Gantt Chart
    • Calendar
    • DatePicker
    • DateRangePicker
    • DateTime Picker
    • TimePicker
  • Dropdowns
    • ComboBox
    • AutoComplete
    • Dropdown List
    • MultiSelect Dropdown
    • ListBox
    • Mention
    • Dropdown Tree
  • Navigation
    • Carousel
    • TreeView
    • File Manager
    • Toolbar
    • Menu Bar
    • Breadcrumb
    • Accordion
    • Context Menu
    • Tabs
    • Sidebar
    • Stepper
    • AppBar
  • Inputs
    • File Upload
    • Signature
    • Color Picker
    • Input Mask
    • TextBox
    • Numeric Textbox
    • Slider
    • Radio Button & Checkbox
    • Toggle Switch Button
    • Rating
    • TextArea
    • OTP Input
  • Layout
    • ListView
    • Splitter
    • Dialog
    • Dashboard Layout
    • Card
    • Tooltip
    • Timeline
    • Avatar
  • Notifications
    • Message
    • ProgressBar
    • Skeleton
    • Toast
    • Badge
  • Forms
    • Query Builder
  • File Viewers & Editors
    • PDF Viewer
    • In-place Editor
  • Interactive Chat
    • AI AssistView
  • Smart Components
    • Smart Paste Button

React PDF Viewer - Tutorial Videos

Go Back
thumbnail image

Watch video

Getting Started with the React PDF Viewer Component

See how easily you can create and configure the Syncfusion React PDF Viewer. In this video, you will learn how to set up the Syncfusion PDF Viewer server-side web service and integrate the PDF Viewer component into a React application. You will see how to load a PDF document from a URL to the React PDF Viewer.

Download Example: Getting Started with the React PDF Viewer

Topics included
1. Introduction 00:00 min
2. Create a React project 00:21 min
3. Generate and register license key 01:19 min
4. Required PDF Viewer CSS styles 02:16 min
5. Add React PDF Viewer Module 02:44 min
6. Set up the PDF Viewer server-side web service 03:33 min
7. Assign the web service URL 05:25 min
8. Load a PDF document from the URL 05:49 min
Plaform: React Show more
thumbnail image

Watch video

How to Add a Custom Toolbar to the React PDF Viewer Component

In this video, I will demonstrate how to load a PDF file from a local path and add page navigation, zooming, text search, printing, and download functions to a custom toolbar in the React PDF Viewer.

Download Example: Add a Custom Toolbar to the React PDF Viewer

Topics included
1. Introduction 00:00 min
2. Hide built-in toolbar 01:27 min
3. Design custom toolbar 02:12 min
4. Add file open module 02:26 min
5. Add navigation module 06:14 min
6. Add magnification module 08:35 min
7. Add separators 10:15 min
8. Add text selection module 10:44 min
9. Add text search module 11:50 min
10. Add print and download items 15:15 min
Plaform: React Show more
thumbnail image

Watch video

How to Add a Custom Toolbar with Annotations and Form Fields to the React PDF Viewer Component

See how to add a custom toolbar with annotations and form fields to the React PDF Viewer component using the Syncfusion React PDF Viewer.

Download Example: Add a Custom Toolbar with Annotations and Form Fields to the React PDF Viewer

Topics included
1. Introduction 00:00 min
2. Import annotation module 01:35 min
3. Add text markup annotation 02:02 min
4. Add shape annotation 03:33 min
5. Add measurement annotation 04:30 min
6. Add free text annotation 05:31 min
7. Add stamp annotation 06:31 min
8. Add handwritten signature annotation 10:00 min
9. Add ink annotation 11:48 min
10. Import form fields 12:34 min
11. Add form fields 12:46 min
12. Add signature form fields 14:23 min
Plaform: React Show more
Chat with us