Up next in 10
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:03
in this video I will show you a reactjs
0:06
package which allows you to select
0:09
colors and gradients so there is a
0:13
package right here in this video I will
0:15
show you let me run the react CH
0:17
app so npm run devs so this application
0:22
is running on Local Host 5173 port
0:25
number so you will see this gradient
0:27
Color Picker out there where you can
0:29
select a Sol color or let's suppose if
0:32
you want to select a gradient you can
0:34
select and you will actually get this
0:36
heximal value RGB a value as well right
0:40
here so when you select any sort of
0:42
color that you want from this gradient
0:44
or any solid color so as you changed it
0:48
you will also see this hexad decimal
0:50
color will also change so whatever color
0:53
that you want to choose right here you
0:54
can easily choose it using this nice
0:56
little widget that we allow this is
1:00
Color Picker and you can do it for solid
1:03
or it's gradient as
1:05
well so in this way I will show you this
1:08
package a very simple example in this
1:11
video how you can do that so there is a
1:15
specific package which is there uh which
1:19
is react best gradient Color Picker if
1:22
you just go to npmjs.com and just search
1:25
for this
1:27
package uh this package if you go to
1:30
npmjs.com just search for this package
1:34
you will see this is actually the
1:36
package name uh I've already installed
1:39
this package so actually this is a
1:42
command here you need to Simply execute
1:45
this it's almost got 5,000 weekly
1:48
downloads so I've already installed it
1:50
so I will just show you a very basic
1:52
example so just make a simple functional
1:55
component and just you need to first of
1:57
all import the module so you will simply
1:59
say import Color Picker and then from
2:03
this there is a hook which you can use
2:05
use Color Picker and it will be coming
2:08
from this package react pest gradient
2:10
Color Picker so it's almost 277
2:13
kilobytes this is actually the package
2:15
right here in this way you can import
2:17
this and then in the react CH State we
2:20
will need to declare some State variable
2:22
first for keeping track of which color
2:25
the users select for this we use the UST
2:27
State hook and we provide a initial
2:31
value for this Color Picker which is
2:34
actually some kind of
2:36
gradient so you can put any gradient of
2:39
your choice so this is the initial value
2:41
that it
2:42
has and then we also do the same thing
2:46
for the this one which is there are two
2:49
functions available for selecting the
2:52
solid color and then for selecting the
2:54
gradient color so both these methods
2:56
will be coming from this hook which is
2:59
used
3:01
Color Picker and actually here you need
3:03
to pass the color and the set color
3:07
these two functions right here so we are
3:10
passing this actual variable and the
3:12
hook functions so in the inside this
3:14
hook so now we just need to inside our
3:17
jsx wherever you need to embed this
3:20
Color Picker you put simply by having we
3:25
we have these you can simply import this
3:28
component just WR this Color
3:32
Picker we embed this and it actually
3:35
takes two parameters first of all the
3:37
actual value initial value of this Color
3:40
Picker and the second one is whenever
3:42
you change the value whenever you select
3:45
a color from this Color Picker this on
3:47
change function will execute and here we
3:50
bind this function of hook function so
3:53
whenever the color changes this function
3:55
will execute that's all that we need to
3:58
do and if you refresh your application
4:00
you will see this Color Picker being uh
4:03
embedded inside your react CH
4:05
application and you will actually see as
4:07
soon as I change the color you will also
4:10
see this uh values will change this is
4:12
hexadecimal rgba values so in this way
4:15
you inside your react CH application you
4:18
can have this gradient and solid Color
4:20
Picker for hexadecimal or rgba values so
4:23
in this way you can install this I've
4:26
already shown you a complete example in
4:28
this video so you can easily show this
4:31
Color Picker so thank you very much guys
4:34
for watching this video please hit that
4:36
like button subscribe the channel and
4:38
also check out my website as well free
4:41
mediat tools.com uh which contains
4:43
thousands of tools regarding audio video
4:46
and image and I will be seeing you guys
4:48
in the next video