Up next in 10
Build React.js Customizable Social Icons with react-social-icons Library
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you one other
0:04
package specifically for react CH if you
0:06
want to show social media icons on your
0:10
website if you want to allow user to
0:13
share your content so this is actually
0:14
the
0:15
package the name is react social icons
0:19
I've already installed it so I will just
0:22
show you a very basic example so just
0:24
make a simple functional
0:26
component and now to include this
0:28
package
0:30
you will simply import this so just
0:33
write
0:34
import and it contains this social icon
0:37
component and it will be coming from
0:39
this package react social
0:42
icons so now to show these buttons it's
0:45
very easy we come to the
0:48
jsx and we provide we write this
0:50
component social icon and then it
0:53
actually takes some parameters so as
0:56
I embed this component on the right hand
0:59
side you will see this button will be
1:02
configured so now you can actually pass
1:04
some properties to this so you can
1:07
provide the network so it actually
1:11
supports all the social media networks
1:13
so if I provide Facebook you will see it
1:15
will change it to a Facebook
1:18
button so in this way you can show more
1:23
buttons as well by changing this to
1:26
Twitter and this one to
1:31
Pinterest this is Tumblr this is
1:34
WhatsApp all the networks are supported
1:37
you will see one by one all these
1:38
buttons will be
1:41
there and if you want to customize the
1:44
background color there is also this BG
1:46
color option as well you can customize
1:49
it as well so it will change to red
1:51
color as well so all these customization
1:53
you can even do foreground color color
1:56
if you want to change to let suppose
1:59
blue you can see the text color will be
2:02
changed so also you can do this
2:04
customization as well and then it also
2:08
takes the URL that you want to share so
2:10
you need to provide whatever website you
2:13
are sharing so simply you can provide
2:15
this in this prop so once they click
2:18
this button they will be redirected
2:20
to this website so you will see that so
2:24
once they
2:26
click so in this way you can do this and
2:31
it's a very simple component you provide
2:33
write the component and then you pass
2:35
the property right here whatever URL
2:37
that you want to share and this is your
2:40
network and all these networks are
2:43
supported so I think telegram is also
2:46
supported so if you just write telegram
2:48
you'll
2:56
see so you can check out the
2:59
documentation you can find more buttons
3:01
as well I
3:10
think so these are the major
3:13
ones so in this way you can embed these
3:16
social icons very easily so this was the
3:19
tutorial and thank you very much for
3:21
watching this video and do check out my
3:24
website as well free mediat tools.com
3:26
which contains thousands of tools
3:29
regarding audio video and image and I
3:32
will be seeing you in the next video
#Online Goodies
#Photo & Image Sharing
#Photo & Video Sharing
#Skins
# Themes & Wallpapers
#Social Network Apps & Add-Ons
#Social Networks