Up next in 10
Build a React.js EPUB Viewer & Editor to Render EPUB Using react-reader Library in Browser
Jan 9, 2025
Build a React.js EPUB Viewer & Editor to Render EPUB Using react-reader Library in Browser
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we will look at how to
0:04
render UB file UB file is a special file
0:09
especially as compared to PDF it's a
0:12
open standard file format for digital
0:14
books that allows readers to access
0:16
content on a various of devices so Epub
0:18
file basically they have a module right
0:21
here which is react reader specifically
0:24
for reacts applications we can embed the
0:27
EB files really easy this is a module
0:30
that we will be using 5,000 weekly
0:32
downloads are there and let me show you
0:34
the application so if you refresh the
0:36
application you will see the Epub file
0:39
will be displayed and we will have these
0:42
we can go to any page and then we have
0:44
these controls as well to go to the
0:47
pages and read it very easily in the
0:49
browser so if you have a Epub file and
0:52
if you want to read it specifically
0:54
inside react CHS applications then we
0:56
have this module which is react reader
0:59
so I will show you a very simple example
1:02
where you can load and embed this eup
1:05
file and show it in the react
1:08
application so the very first thing you
1:09
need to do we need to install this we
1:13
will simply say npmi react eup sorry
1:17
react reader this is actually the module
1:20
uh just install this I've already
1:23
installed it so what I will do I will
1:25
start the development server
1:31
so the first thing we need to do we need
1:32
to Simply make the functional
1:37
component so if you just refresh it will
1:40
automatically refresh whenever you make
1:45
changes so the next thing we need to do
1:47
we need to import this module at the
1:50
very top you'll simply say import and we
1:54
have this method which is react reader
1:56
this is a component coming from
2:00
react reader
2:02
module and now in the state we just need
2:06
a one variable for keep track of which
2:09
location the user has there in the eup
2:12
file location set location you use the
2:15
use State hook initial value will be
2:17
empty and now in the gs6 we just need to
2:22
have a div tag and inside this we will
2:25
have the style attribute we will just
2:27
provide an height of 100 VH so it
2:31
basically takes the overall space of the
2:33
page and then we'll be embed this react
2:35
reader
2:39
component so here it takes uh two
2:42
properties first is the URL that you
2:44
want to load so I have one URL that uh
2:49
of a eup file you can load your own URL
2:53
on which the E file is hosted so if you
2:56
just provide this URL in this component
2:58
and refresh you will see your file will
3:01
get opened so you can navigate to the
3:05
pages right here this is the next page
3:07
previous page this is actually a
3:09
component where you can embed this Epub
3:11
file and if you open the content if you
3:14
want to navigate to the chapter wise if
3:18
you want to do
3:21
this you need to set two more attributes
3:25
this is for the location so here we need
3:27
to provide the location as well for the
3:30
variable that I set and also on location
3:33
changed this is actually a event which
3:35
will get called whenever you want to go
3:37
to a specific page number so we have
3:40
this variable coming and inside this we
3:43
can set this
3:45
location
3:48
UB like this so in this way it takes
3:51
these two additional parameters so if
3:52
you want to go to a particular page
3:54
number you can simply write here just
3:58
click it and you will go go to that
4:00
specific page number specific chapter so
4:04
in this way you can
4:07
read a eup file you can see you can go
4:11
to any specific page number you can go
4:13
to any specific chapter by clicking this
4:17
and then going to it so in this way you
4:19
can do this it's a special react sh
4:21
application which is react reader it's a
4:23
module component you can use it and it's
4:26
powered by The Base Library of
4:28
ejs if you don't know ePub JS is a
4:33
library specifically for reading the
4:36
epub files this is their official
4:40
website so we using it the Base Library
4:43
of ePub JS to embed the eup files so
4:47
thank you very much guys for watching
4:48
this video for more videos like this
4:50
please subscribe the channel and do
4:52
check out my website as well free mediat
4:54
tools.com which contains thousands of
4:56
free tools regarding audio video and
4:58
image and I will be seeing you in the
5:00
next video
#Online Media
#E-Books
#Programming