uh hello guys uh welcome to this video
so in this video I will show you a
ReactJS package which is used to
implement copy to clipboard
functionality inside your ReactJS
application so copy to clipboard guys is
a very important functionality in an in
any application so you can see we have
this both the ways by which we can
implement copy to clipboard by the span
tag or by a simple button as well so we
have this input field right here if you
write something inside this input field
and then if you click copy to clipboard
you will see you will get this
notification that the text has been
copied same you can do this with the
button as well so as you click the copy
to clipboard with button so your text
will be copied and now you will paste
this
text you can see the text has been
successfully pasted so you can do this
with any HTML element it can be input
field it can be a paragraph it can be a
button as well so let me show you the
module that I'm talking
about so if you go to
npmjs.com there is a package
here react copy to clipboard this is
actually the package
that I'm talking about so you just need
to install this package by executing
this command npmi react copy to
clipboard i have already installed it
it's almost having 1 million weekly
downloads so I will show you a very
simple example so just create a simple
functional
component so right here we first of all
need to import this module using the
import statement so we simply say copy
to
clipboard from this package after that
we will have uh two variables first
variable will be to actually hold the
value and for this we will be using the
ustate hook
and the second one will be the hold the
value
of set copied and set
copied initial value will be false so it
will be a boolean parameter signifying
that whenever you hit the
button so my microphone was gone so now
it is back here so right here inside the
return statement we will have an actual
input field
and we'll be binding the value
here and we'll also be having an
onchange event handler so whenever the
value is changed this onchange event
handler will execute inside this we will
be having the set value which will say
e.target dot value and then we will also
be set copy
to
false so if you refresh your application
you will actually see this input field
appearing here you can write something
and uh after that uh we will have an
actual copy to clipboard button just
after this we will use this copy to
clipboard button and uh inside this
component it takes an object it takes an
parameter which is the text that needs
to be
copied so we will we are copying this
text that is there in this input field
we are providing the text the second
parameter it takes is the on copy
function which is actually
a simple function which will execute and
here we will simply call this set copied
function and make the value from false
to
true so then we can simply say a span
tag a simple notification message will
appear to the user that
your text has been successfully
copied and when the text has been
successfully copied uh right here after
this we will show a simple notification
message in the red message red color
color is equal to red margin left is 10
pixels so now if you write this click
this you will see
copied and same you can do this for the
button as well so if you want to have a
button you can have another component of
copy to clipboard this time we will have
a button instead of a st span tag so you
can have multiple copy to clipboard
buttons first one for the span tag now
this one is for the button as you can
see both the things perform the same
thing it is copy to clipboard text if I
hit this button now you will see copy to
clipboard so in this way guys you can
use this package inside uh
reacts which is react copy to clipboard
which is used to implement the
functionality of copy to clipboard
inside your reacts application uh thank
you very much guys for watching this
video and also check out my website
freemediatools.com
uh which contains thousands of tools