WEBVTT

00:00.000 --> 00:05.560
Hello friends, today in this tutorial I will
be showing you that how to convert dynamic

00:05.560 --> 00:14.680
HTML and CSS to PDF document in React. So basically
this is the application that we will be building here

00:14.680 --> 00:22.720
So simply you will just write a simple title
of the post and here you can copy paste the

00:22.720 --> 00:32.400
image URL from any website. I am taking this URL let's
suppose any image you can take from any website let me take

00:32.400 --> 00:40.960
this image copy image address so paste it
here and now if you click submit now you will

00:40.960 --> 00:48.879
see that if I click on capture as PDF so as
an attachment this image will be inserted

00:48.879 --> 00:57.560
and this is your title here this is the image. So basically it has in
the background it has taken the screenshot and now it has successfully

00:57.560 --> 01:10.200
inserted the title and the image inside our ReactJS application. So in the
background guys we are using this library which is React2PDF you can see it's

01:10.200 --> 01:17.480
a very popular library which is a PDF generation
library it has got 10,000 v3 downloads so

01:17.480 --> 01:24.160
it is pure ReactJS we are not using any third
party library so just you need to use this

01:24.160 --> 01:34.040
library command is very simple npm i react2pdf
so all the source code guys I have given in

01:34.040 --> 01:40.400
the video description this is my blog post
so you will see that this is the blog post

01:40.400 --> 01:45.840
that you need to write here so just go to
the video description link to download all

01:45.840 --> 01:52.920
the source code. So now let's get started guys by
building this application so first of all what you

01:52.920 --> 02:04.240
need to do is that you need to create a brand
new ReactJS project so I will close this so

02:04.240 --> 02:16.480
I will make a new directory which is reactjs
pdf sorry pdf so the command is npm create

02:16.480 --> 02:24.880
reactor and followed by your project name
so in this case I will just make react pdf

02:24.880 --> 02:33.160
so this will create this project guys so need
to install the following packages so it is

02:33.160 --> 02:41.800
saying that yes so now basically it will
create a brand new ReactJS app guys so it

02:41.800 --> 02:49.560
will install some of these dependencies so
just wait it is installing these packages

02:49.560 --> 02:57.079
so this will hardly take 5 to 10 seconds and
after that you can install this library which

02:57.079 --> 03:08.000
is react to pdf so the documentation is quite
good all the example codes are there in how

03:08.000 --> 03:15.280
to create the pdf documents so we will be
looking at how to do this so just wait here

03:15.280 --> 03:55.520
5 to 10 seconds so now you can see that guys it is
installed that we can open this inside Visual Studio

03:55.520 --> 04:04.200
Cortex editor so this is our brand new ReactJS
project so you will see that we can delete

04:04.200 --> 04:18.640
all this inside this we will have a post
component so we can delete the logo so right

04:18.640 --> 04:39.880
here we can make components folder so right
here inside this we can make post or js so

04:39.880 --> 04:57.360
when we now include the post so we can import post
from post here like this so we are successfully

04:57.360 --> 05:03.280
including this post component so right here
guys inside this post component this will

05:03.280 --> 05:15.239
be simply class level component so all the source
code will be there inside Visual Description

05:15.239 --> 05:31.479
so the basic component that you write class
post extends react component and export default

05:31.479 --> 05:47.120
post and here we need to import the react
from react and right here guys we need to

05:47.120 --> 06:07.600
render out from this component something
so we can use the return statement return

06:07.600 --> 06:34.880
so if you check this this needs to be there
inside render function so I forgot this is

06:34.880 --> 06:48.159
render function inside this function here
and here we need to return so inside this

06:48.159 --> 07:03.159
guys we will have a simple let me paste the
code here paste it so based upon a condition

07:03.159 --> 07:13.840
guys we will have this condition which is this
condition this.state.post submitted so if the

07:13.840 --> 07:20.660
post is not submitted we will be having this
simple form here which is this jumbo form we

07:20.660 --> 07:28.360
will be adding a new post here we will have the
field for the title so this is a simple input

07:28.360 --> 07:36.480
field so post title here we will write so we
have binded successfully the on change and then

07:36.480 --> 07:46.640
for the image we have this here we will provide
the image url like this and lastly we have this

07:46.640 --> 07:54.400
button so when we click this button we will
execute this function which is submit post

07:54.400 --> 08:10.840
and when the form is submitted then we will
display the pdf component here like this let

08:10.840 --> 08:39.919
me fix this let me render out so now it
is looking good guys so that's it now

08:40.840 --> 08:47.360
so we are including this post component right
here so if I launch this application by npm run

08:47.360 --> 08:57.640
start so you will see this will start the
reactOS application so it will start this

08:57.640 --> 09:12.680
post which is localhost 3001 so it is just
starting the development server so just wait

09:12.680 --> 09:27.240
so it is saying that module not found can't
resolve post so this error typically let me

09:27.240 --> 09:47.600
see guys so this needs to be this is there
inside wrong the import statement is wrong

09:47.600 --> 10:01.640
guys because it is there inside the component
folder so that is why it was so it is saying

10:01.640 --> 10:09.560
pdf is not defined so we also need the pdf
component guys so let me just delete this for

10:09.560 --> 10:33.400
now keep lying you do need to create the second
component pdf here so inside this component

10:39.560 --> 10:47.680
we will just be having let me just paste this
code so now we need to include this component

10:47.680 --> 11:01.079
right here at the top import pdf from pdf so
hopefully this can't resolve react to pdf so

11:01.079 --> 11:08.760
now guys we need to install this dependency
which is react to pdf so this will hardly take

11:08.880 --> 11:15.800
five seconds to install this dependency so you
need to use the force keyword dash dash force

11:15.800 --> 11:28.439
so this is useful whenever you have a different
reactOS version installed so just use it and now

11:28.439 --> 11:56.920
you can run your application so it is just
starting the development server guys so just

11:56.920 --> 12:17.000
wait so it is compiled successfully it is saying
cannot read properties of nulls reading force

12:17.000 --> 12:26.880
submitted so this is coming because we haven't
written the reactOS code guys so we have

12:27.360 --> 12:39.720
all these methods you will see that this onChange
this submitPost so we need to write these methods

12:39.720 --> 12:46.280
also so if you go to the video description link
I have written these methods so simply you need

12:46.280 --> 13:00.199
to declare state let me paste it in the post
component so this is a state variable guys so

13:00.199 --> 13:06.480
you have three variables the title of the post
the image URL of the post and force submitted

13:06.480 --> 13:13.360
which the default value is false and onChange
whenever the input fields are changed this

13:13.360 --> 13:24.520
variable automatically trigger passing the input
values and passing the function the state it will

13:24.520 --> 13:31.400
automatically set the state and lastly we will
use the submitPost method first of all we will

13:31.400 --> 13:39.160
check if all the fields are filled inside the
condition if all the fields are set then we will

13:39.160 --> 13:46.120
make this post submitted value from false to
true and based upon these conditions we will

13:46.120 --> 13:55.600
render out the template so once again if you
refresh it now you will see that we have your

13:55.600 --> 14:07.920
post title and then we have the image click submit
capture as pds so now you can see that this is

14:07.920 --> 14:14.280
your post title this is the image which is
successfully inserted to the PDF document so

14:14.280 --> 14:23.479
in this way guys you can dynamically insert text
as HTML and image to your ReactOS application so

14:23.479 --> 14:37.640
I have shown you complete example so basically
what you can do is that we can also this is

14:37.800 --> 14:43.960
you can see that this is the input field where
we are getting the type image URL this is the

14:43.960 --> 14:53.520
post title so we have binded onChange like this
and to this component we are passing the title

14:53.520 --> 15:02.120
and the image and in the app component we are
rendering out the post and in the PDF guys we

15:02.120 --> 15:10.200
are importing this library which is PDF from
React to PDF yeah after that we are getting

15:10.200 --> 15:28.560
the reference and then we are passing the props
this you can also make a size if you want to

15:32.120 --> 15:49.040
let's suppose app.css so I can write a style
here which is h1 the color I can change to red

15:49.040 --> 16:07.640
so now what it will do guys so it will make this
h1 heading color to red you can see that so let

16:07.640 --> 16:14.480
let me just insert it now you will see that the
CSS properties are also working you can also

16:14.480 --> 16:21.120
change the color of the text as well so you can
have as many properties as you want you can also

16:21.120 --> 16:36.640
change the background color to let's suppose
green you can also change the whole size to 45

16:36.840 --> 16:51.600
pixels what will happen guys so so now you can
see that if I click capture so now you will see

16:51.600 --> 16:57.000
that it will also change the background color of
the heading so in this way guys you can also use

16:57.000 --> 17:03.520
the CSS properties inside your PDF document with
the help of this module you can also change the

17:03.520 --> 17:19.280
background image as well so let me take this
image for example so we have the app class which

17:19.280 --> 17:36.480
is you can have a background image so URL so we
can provide this URL that's it so if you provide

17:36.480 --> 17:50.320
this so now you will see that guys it has changed
the background image to this one now if I capture

17:50.320 --> 18:08.080
this so the background image is not getting it
let me set this background image to the heading

18:08.080 --> 18:36.080
let's suppose so click on capture so now you can see
that guys this background image property is also working

18:36.080 --> 18:47.399
so in order to capture all space you can increase
the height of this heading to 560 so now this will

18:47.399 --> 19:12.679
take all space of the page so now you can see that now it is taking
more space you can play with this property guys I have shown

19:12.679 --> 19:20.679
you this will work for dynamic CSS images and
also for HTML in order to create a brand new

19:20.679 --> 19:26.320
PDF document so all the source code guys will be
there inside video description please hit the

19:26.320 --> 19:29.800
like button subscribe the channel and
I will be seeing you in the next video