Up next in 10
Build a React.js Screen Capture as PNG Image in Browser Using react-screen-capture Library in JSX
Jun 3, 2025
Get the full source code of application here:
https://codingshiksha.com/react/build-a-react-js-screen-capture-as-png-image-in-browser-using-react-screen-capture-library-in-jsx/
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/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a reacts
0:05
example of capturing the screen and
0:06
downloading as a image file so we have a
0:09
package right here if I click the
0:11
capture button so what you will see I
0:14
will be able to capture whatever portion
0:16
that I want to convert to screenshot so
0:19
I will be able to take the screenshot
0:21
and you will see we have a download
0:23
button and as soon as I click the
0:25
download button my image will be
0:27
downloaded so you can see
0:31
that so there is a module here uh let me
0:35
show you the
0:37
module react screen capture is the
0:40
module name if you go to
0:42
npmjs.com just search for this module
0:44
react screen capture this is actually
0:47
the command here very simple to install
0:50
it's almost got uh 2,000 weekly
0:54
downloads and uh all the source code
0:57
will be given in the description so now
0:59
let's get started just make a simple
1:01
functional component and uh now we just
1:04
need to require this module for
1:06
requiring it we simply use the import
1:09
statement we simply say import screen
1:12
capture and this will be coming from
1:14
this react screen capture so basically
1:17
using this import statement you actually
1:19
import this module and after that you
1:22
actually declare a
1:25
variable let me just declare it screen
1:29
capture and set screen
1:32
capture so this will be a variable for
1:35
this we'll be using the use state hook
1:37
initial value will be null so then
1:41
inside this JSX we will wrap everything
1:46
inside the screen capture component so
1:49
what I will do I will write here screen
1:52
capture opening and the closing tag so
1:55
here it actually takes uh a attribute or
1:58
a property which will be on and capture
2:02
this will be a simple function which
2:03
will execute so once you actually
2:06
capture the data or a window so I'm just
2:11
calling it as handle screen capture this
2:13
so this will the function which will get
2:15
executed so you can just call it
2:17
anything let me make this function
2:20
handle screen capture and you get this
2:23
capture inside your function call back
2:25
function and here inside this we simply
2:28
call this set screen capture is equal to
2:31
the capture the actual capture which is
2:34
captured by the user that's all and
2:37
after that you will actually define
2:41
everything so this will be your function
2:44
and
2:46
uh let me just make it as a function so
2:50
here we will close everything
2:58
so you will define whatever thing that
3:01
you want to capture right here inside
3:03
this
3:04
element so let me just write some basic
3:09
HTML so we have some basic HTML right
3:12
here if you see we have defined some
3:13
basic HTML and we have a button right
3:17
here which is a capture button so we are
3:20
executing this function on start capture
3:24
so now we just need to define this
3:25
function on start capture so as soon as
3:31
you can see we are executing this
3:32
function on start
3:34
capture once we click the capture button
3:40
and so now what happens if you refresh
3:43
you'll have see this capture button so
3:46
once you hit the capture button you will
3:47
be able to capture any portion of the
3:50
window and after capturing it we do need
3:53
to show a download button and also
3:56
render whatever that we captured so we
3:59
can easily do this using screen capture
4:01
if it is defined then we need to
4:04
show a download button alongside with
4:09
showing the screen
4:10
capture and here we'll be showing a
4:13
simple download button
4:18
we'll simply say here download and just
4:26
be binding an on click listener which
4:29
will be handle save so once you click
4:31
the download button you just need to
4:33
define a JavaScript function right here
4:36
as soon as
4:37
you handle
4:39
save and inside this function you just
4:42
create a simple anchor tag to download
4:45
the image as an attachment so you'll see
4:47
we are creating an anchor element and
4:50
downloading the image as an attachment
4:51
so that's all so once you go to the
4:54
browser now simply click the capture and
4:56
you can capture any portion of the
4:58
screen and you will see this download
5:00
button and now you can see your image
5:02
has been successfully downloaded
5:06
so this is actually the module guys
5:07
which allows you to easily capture your
5:10
screen and convert this into a PNG
5:12
screenshot this is actually the module
5:15
thank you very much for watching this
5:17
video and also check out my website
5:19
freevidetools.com which contains
5:21
thousands of tools regarding audio video
5:24
and image and I will be seeing you in
5:25
the next Thank you