Up next in 10
Build a Lightweight PDF Viewer in Browser Using React WITHOUT Any External Libraries
6 views
Jun 3, 2025
Get the full source code of application here: https://codingshiksha.com/react/build-a-lightweight-pdf-viewer-in-browser-using-react-without-any-external-libraries/ Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions https://youtu.be/Bon8Pm1gbX8 Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys uh welcome to this video
0:02
so in this video I will show you how to
0:04
make a light paid uh PDF viewer inside
0:07
the browser without any external
0:10
dependencies in
0:11
ReactJS so I'm just running this
0:13
application in the browser so we have a
0:15
choose file button and you can actually
0:19
select a PDF file here and you will see
0:21
it will display the PDF file natively
0:23
inside the browser
0:26
so for this we haven't used any external
0:29
dependencies it's completely lightweight
0:32
and it doesn't require much code you
0:35
will see it will show the live preview
0:36
of each page and you will be able to
0:38
navigate to any page in the PDF and
0:41
start reading it we have all these basic
0:43
controls which is zoom in zoom
0:45
out we can even rotate the page as well
0:48
in clockwise anticlockwise direction and
0:50
then we can even
0:52
download we can even print by clicking
0:56
the print button so we have all these
0:58
controls so all the source code is given
1:01
in the description so now let's get
1:03
started so let me just build a very
1:06
basic uh functional
1:10
component so what you need to do right
1:12
here uh you will make use of I frame so
1:15
right in the JSX we
1:17
will just give it a
1:21
style of padding of
1:23
1F and right here we'll be having an H2
1:26
tag here which will say basic
1:31
PDF viewer and inside this we will have
1:35
first of all input file where we allow
1:39
the user to simply select a file
1:42
here and we also be binding an onchange
1:45
event handler so as soon as the user
1:48
selects a file here we'll be executing
1:50
this function handle file
1:54
change so now we just need to define
1:56
this function in the JavaScript code
1:59
right here so just
2:06
say so for this we just need a very
2:10
basic state variable just to store the
2:13
path of the input
2:20
file so initial value will will be null
2:23
so for this we'll be using the use state
2:27
hook from react here and after that
2:30
inside this function handle file change
2:33
we will get access to the file here by
2:35
using this event target file zero and we
2:39
just say if the file is not PD show
2:42
alert
2:44
warning and then we will just read the
2:47
file using the file reader API and this
2:50
contains a
2:52
onload function
2:54
function we'll just basically set the
2:57
file URL to whatever e.target.t result
3:01
and we'll calling this file
3:07
reader
3:11
dot sorry we have just made this reader
3:15
dot read as data URL so be using this
3:20
function which will read the base 64
3:22
code of so we will set this file URL and
3:27
now to display this file we come to the
3:30
JSX after this input we will compare if
3:33
the file URL is available in that case
3:35
we just need
3:37
to just say question mark we use the
3:41
turnary
3:44
operator if the file URL is available
3:47
then inside the I frame
3:51
tag we will
3:54
display so for
3:59
this we will use the source here which
4:01
will
4:02
be the actual file URL and then we will
4:06
give it a title to it of
4:10
PDF preview and then we will set the
4:14
width which will be 100%
4:18
height you can set to let's suppose 600
4:23
pixel and then we can give it a style
4:25
here which will be border one pixel can
4:30
give any color here let's suppose I say
4:32
this one gray color and then we can give
4:36
uh margin from the top which will
4:40
be
4:44
1m so that's all that is needed for this
4:47
application and here we just need to
4:49
write if the PDF file is not loaded then
4:52
we'll show this error message No please
4:55
upload a PDF to view so if you refresh
4:59
and now you'll see this message
5:00
appearing and choose file button so as
5:03
soon as you choose a PDF file you will
5:05
see this uh PDF viewer will display and
5:10
we haven't used any external
5:11
dependencies for this so it's natively
5:13
built inside the browser so in this easy
5:16
way you can construct this inside your
5:19
ReactJS application so each page is you
5:22
can go to any page right here and read
5:24
this PDF file directly in the browser so
5:27
this is the actual code guys if you are
5:29
interested the link is given in the
5:31
description you can go to my blog post
5:33
and get this full source code so thank
5:36
you very much for watching this video
5:37
and also check out my website
5:39
freemediattools.com which contains
5:41
thousands of tools regarding audio video
5:44
and image