Build a React.js PDF Editor to Add Text & Images in Browser Using react-pdf Library in Javascript

uh hello guys welcome to this video so in this video we will look at how to build out a complete PDF editor where

you can actually add text images inside react CH so you can see

the application that we will be building in this video on your screen this is the final demo so we have actually this uh

drop down either we can add text to the PDF or we can add images so we have two

options right here so depending upon which option you select so if you select the text option you will see this text

area appearing right here so here you can simply add any

text so let's suppose if I paste a paragraph from the Wikipedia

and I paste this paragraph and we have this text area out there if I paste this paragraph and we get this download PDF

button right here at the bottom side corner if I click this button you will actually see a PDF file will get

downloaded and it will actually depending upon how much text

that you pasted it will calculate the total number of pages that is required for inserting that text automatically

the formatting will automatically be handled by this library and you can just see right

here so if I increase the text right here if I paste more

text so now what you will see it the pages will increase because the text has

been increased and now you see it has splitted across four pages so multiple

Pages this is the first page this is the second page this is the third page this is the fourth page so you can just see

the spacing of the text between the text between the lines are full taken care by

the library that we are using right here in react CHS and now we have the second option as well if you now want to

convert a series of images that you want to add to the PDF you can select your

images let me select these four Images you will see the live preview of

all these images one by one so four Images are selected and we have the download PDF button so if you click that

button you will see the PDF file will get downloaded and we will have all of these four Images appearing in a

separate page so this is the first page second page third P page and fourth page so this is a complete PDF editor we

will be building in this video and uh for this we are specifically using a

library which is react PDF dorg this is

actually the library which is entirely built for react CH applications if you want to build a PDF editor specifically

for react you can use this Library it is useful for rendering the PDF documents

and adding text images all that stuff so the command is really simple you just need to npmi at theate react PDF

renderer save so to install this so just copy this command and go to your command

line and just initialize a very basic react Chase project I already done that so install this module by invoking this

command so I've already installed it and we also need to install react bootstrap

as well which is a boot bootstrap module for integrating bootstrap inside your react CH applications and also we do

need to install the base bootstrap package as well so react bootstrap and bootstrap so install these two packages

as well alongside with that main package so after installing all three packages

start your development server so we will start it from scratch so now to get started just

create a app jsx file and

this is a structure of the react Chase project I have very basic react Chase project so I will create a functional

component if I refresh you will see it auto

reloads so now the first thing we do we need to do here right here we need to

declare some State variables for this

application so we need three state variables first will be

for selecting the mode so either you can add text or images so that mode initial value will

be we'll be using the U State hook initial value will be

text and then we will have the text input there is a way by which we will

track what text that the user has written so again you'll be using the UST

State hook initial value will be nothing and for the images we will have a array

images set images and again use the UST State hook initial value will be empty

array so now we have these three UST State hooks variables first for the choice either text or image second is

the input text field where we allow the user to paste the text that needs to be

inserted in PDF and third is the actual images that the user will select initial

value is empty array so these three state variables we have declared and now we need to paste the

jsx which will be required for building this application

and so for this we need to import some bootstrap so what I will

do I will import the bootstrap CSS file bootstrap dis CSS bootstrap m. CSS we

just uh importing the base CSS file for bootstrap and also we need to uh

in import the different modules which are there the

document so this I will import as we use it so the very first thing we need to

import is the container class of bootstrap so all these tacks are built

in so as you will see you need to import this this will automatically be imported

from react bootstrap that we installed it's a particular tag this container

it's a bootstrap tag and inside this we have the row tag as well which will be

imported we just need to give it a bootstrap class

of this and then you have the call these stands for

column this is just used for Designing the user interface

text image to PDF converter and then we'll have the form

controls or bootstrap form

group and inside this we will have the form label

so all these things will be imported here if you see the form

label so all these things we are just importing right

here so this can be here form group and this is part of theb uh form

object so what we can do we can simply write here form label form.

label and for the label here we will simply say uh select the

mode so if you refresh here you will actually

see it is saying that the column is not defined because I think we haven't

imported that just import that and then import the form as

well so now if you see you will see this uh label appearing right

here and after this label we need to have

a select field for this we will have the form

form. control so we don't don't need the

ending tag for this so we can simply

say and for this we will have a type parameter set it to file and we will

allow the user to upload multiple files so like multiple files so M attribute

and we will only be accepting the image file so image/

star so if you see you will have this choose file button

appearing and basically you'll b a onchange event handler so when we select

the files we will execute this function which is handle image upload so now we just need to Define this function uh

right here so e parameter will be

automatically be passed which is the event parameter inside this function so

when you select the image files we need to read the

files so for reading the files we need to first of all use array from and then whatever the

file selected e. target. files and then the image URLs so we'll

use the map operator and for each file we need to create a URL so url. create

object URL and here you need to pass the actual file which is selected and we'll use this hook

function set images if you see we have declared this hook function we are using it to set the URLs of the

images so in this way you can read all the image file which is selected by the user when

they use this form control so just format this it will look like this

so after this we can even show the live preview

as well of all the images selected by the user after this in a

row so we can actually use curly bracket some write some jsx we use the map

operator again and for each image index variable and we actually have this

display in a call structure and we'll be binding the key

parameter which will be index and the X spacing will be uh

six on medium devices it will be

three giving a class name to it of uh

mb3 and inside this you will actually bind the image tag image source

attribute will be the actual

image and here we need just need to specify the width of the image so 100% is the width so if you just try to

refresh the application and try to select a number of images if I select these images you will

see the live preview of all these images one by one side by side so this is the first image second image third image so

now in this way you can show the live preview before the user actually click

the export to PDF button so now after

this basically we are using this jsx expression if you

see so after this Loop right here if you it is ending right here

so we have this if you

see so we basically what we need to do here we need to have a dropdown so we

will allow the user to Simply select which option they want to select either they want to add text or image for that

we need to have a drop down and uh for the drop

down just after this heading we will have an

option uh for the mode option I I think we need to declare uh after

this okay this is is the actual mode

i instead of this image input we can replace it by a drop- down control so

form control so here it will be as a select

field and uh the value will be actually the mode variable whatever is the mode that

you selected and also here we'll be binding a on change as well so whenever you

change the value of the dropdown so we will set this mode to whatever is the e.

target. value so if you see we have a drop down

here but we haven't we are not seeing the choices so now for the choices for the different options right

here so just inside this we will have the different

options so we will have two options First Option will be for for convert

text to PDF and the second option will be for

uh this value will be images so convert images to

PDF this one will be value

text so just format the document it will look so we have two options uh in the

dropdown convert text convert images so by default if you see in the US St hook

we actually set this option to text so whenever you load the application for the very first time this text will be

selected by default the user can change this value and now if I change this to

images we just need to show the toggle this in between so if the user select

text then we need to show the XT area if the user select the images option then we need to show the images input field

for for that we need to Simply modify the code

here if you just see after this uh drop

down uh we need to conditionally render the HTML for

that just after this let me

so let me paste

this all the source code will be given in the description of this video so now we act as actually you can see that we

only have the drop down here and if you refresh the page you will see the drop down we have two choices convert text

convert images so now based upon the condition right here

uh this variable that you see mode variable we will write the jsx

expression right here just after this in side Cy bracket we will compare the

value of mode so if the value is equal triple equal to text

then in that case using this Turner operator we will show this

text if the value is equal to image if the value of this variable is image then

in that case we will show the image input so for doing

that right here we will have this row input

inside column we will have the form

group so here we will be having the text area where we allow the user

to so it give it a control ID to this so which will be text input we're just

giving an ID so that we can Target in JavaScript

so inside this we will have the form

label we will say enter text so here the user will enter the text so for this we

will have a text area so form control this time this will be a text

area so as will be text area and number of rows will be 10

and the value will be the actual text

input and we will basically give a placeholder as well just to let user

know what to type here so type or paste your text

here and we also will give a onchange event handler so when the value is pasted in this text area we need to bind

a on change event handler so we need to set the text input whatever is the value

e. target. value so if you refresh your page uh we

do need to write the lse condition as well so if the value is the image so

here we need to show the image input so what I will do I will simply paste

this so now if you see as

if you refresh the page as the application loads for the very first time uh this is selected so now the text

area will show if you change this now the images are input field are showing

so basically we have designed an interface where we allow the user to Simply select which option they want to

choose depending upon that we are changing the controls so now we just want to insert

the text first of all we tackle the text area part so when the user paste the

text in the text area we need to actually create a PDF document and

insert that text for

that we also need a button as well so just after this is ending we need to

have to show the so once the user paste the text right here as they start typ

type uh pasting some text that download button should show at the

bottom and for that we need to write some jsx right here so

row column and here we'll be comparing inside C bracket if the value of

mode again is equal to text and the text

input or we will have or oper in either of these cases if the mode is equal to

images and the images length is uh greater than zero in either of these

cases we again we'll use the Turner operator we will basically show the download

button and for this we do need to make a component for this which I will call at

PDF down download link so

just PDF download

link this component will actually take two properties first is the document and

that second will be the content so we do need to make this

component right here so right at the top

okay this PDF download link is built in component PDF download link it's part of

the library if you see react PDF renderer so which we are using it for

building this application so this is actually a component so it will be

imported from That Base Library so we are just using that and

this takes actually this download button takes two arguments that we need to pass

first is actually the actual document so the actual document here we

need to specify the

mode so the mode is equal to text in that case we need to say we need to load

this is this will be the custom component that we will create and this time we need to give it

the content as a prop to this component so it'll be giving the text

input in the else if the mode is not text in that

case we need to load another custom component this time this will be image

document I will make both these components this component will take images as prop and we'll be passing the

images these are two different components custom component that we need to create text document and image

document let me create these two custom components right at the

top so we can create this first will be

the text component sorry text

document it will take the content as prop and inside this here we can set

properties about the text lines per page I will set it to 40 and

then we will split the lines which are coming using the split

function and we'll be splitting it new line corrector like this and total

number of pages this will be empty and we'll be simply be using the for Loop and we will be looping through each line

lines. length I ++ plus is equal to lines per

page and inside this for Loop basically what we will do inside the pages we will

push lines. slide I and then

the i+ whatever the lines per page variable

that you set and whatever you will be returning

from this component it will be returning the actual

document which is actually part of react PDF if you see this part we are

returning a new PDF document it's a method inside react PDF in order to

create a new PDF document so in the document you Loop through each page

pages. map so page lines

index and we'll create a new page again this is part of the react PDF in order

to create a new page in PDF document and this page

take some properties first is the key parameter which will be index size property so here we need to set the size

A4 size and we need to set the style parameter as well which will be setting

styles.

page so these Ty that we are setting we need we can declare it globally right at

the top which will be defining the styles for the PDF document you can set

a object right here we can do this using stylesheet which is actually a part of

react PDF it will be imported if you see react PDF renderer so here with the help

of this it contains a create function and inside this we can provide options for the pages Global options such as SP

padding you can control which I can set it to 30 whatever is the background color of the

page that you want to set so you can set any background color just provide the

hexadecimal code F4 sorry

f8 F9 f8 this is a whitish color I will

provide and then the actual properties about the text so text options you can

set the phone size the phont family I can set the phone size to be 12 the

margin bottom uh in this way you can set properties about the page and the text

in this object and then the images image you can property you can simply set the width of the image 100%

in double quotes and then the height as well which is

100% so in this way you can set the global options for the images text and

the uh PDF page in the Styles object and now we can use this option we

can simply say

styles. Styles this is for the page property styles.

page so after you set

this what we can do we can uh have a ending tag as well for the page and

inside this we will have the text property and for the text property we

will have the key parameter which I will set it

to the line

index thing this okay for this uh inside

the page we also need to Loop through the page lines as well so page lines dot

map line line

index and here we need to do text the key parameter will be the line

index need to set the style parameter this is for the text styles.

text here we need to put the line actual line so in this way you can build your

PDF document from text so here you're providing all these options the size of the page the styles for the page styles

for the text these are looping through each line this is the text document component

is complete so here we are simply using it if you see

so we are simply using it and similarly we need to design the image document as well so this will be responsible for uh

the images so right here uh add this we can

Define it for images so we can say image document it

will actually be receiving a prop which is images

so uh from this we just need

to basically return a PDF document containing all

these images so we'll Loop through each image images. map

so you can directly like write like this we will Loop through each image and just returning it inside the PDF document

like this we are setting the page size once again A4 size and setting the styles for the page and the

image we simply using those styles that we declared early on and looping through

each image using the map operator so we have declared the image Styles 100%

width height so if you try to now refresh your application and try to paste text you

will not see the download PDF button appearing right here we do need to toggle the setting for the download

button if you see right here uh we are basically pasting it

after you close this uh yes yes right here you need to give the file name

property as well so what file name that you will be giving to your PDF document so this will be depending upon the mode

which mode is selected so if the text mode is selected in that case it will be

textor document. PDF and the second case if the image mode is selected in that

case it will be image document.pdf we again using this tary operator

depending upon this variable we are setting the file name two different file

names and after that we just need

to also have the loading button inside

we will have basically this loading parameter depending upon

whether we are preparing to

download preparing document and then if the loading is

finished in that case we can show the download button using this

button component and here we will be using the variant of uh

primary simply say Here download PDF

that's all it's there guys if you try to paste you will see this download PDF button appearing at the bottom if you

click

it uh I think what we are missing right here uh

I think there is some kind of typo mistake so what I will do I will simply paste all this code all the source code

will be given in the description

I think there is some type of typo mistake which is there if I refresh it

now if I paste the text right here click on download you will see the PDF file will get

downloaded you can paste the text right

here you can see that then we can change the toggle to convert images now we have

the total number of images we can select BNG or jpg can select multiple images

live preview click on download all these images are converted to PDF so in this way you can create a ultimate PDF editor

inside react chairs using this awesome library of react PDF and uh you can perform both these

operations simultaneously convert images convert text into PDF so if you like

this video then please hit that like button subscribe the channel and also do check out my website as well free mediat

tools.com which contains thousands of free tools regarding audio video and image and I will be seeing you in the

next video