Up next in 10
Build a React.js react-avatar Example to Show Avatar Icons of Google,FB & Twitter & Github in JSX
Jan 9, 2025
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:02
in this video I will show you a react CH
0:04
package uh which is used to show Avatar
0:07
images account images from your various
0:10
handles Social Media handles let's
0:12
suppose from Twitter GitHub so this is a
0:15
very handy package specifically designed
0:18
for react sh application so you can see
0:20
we are displaying my handles from
0:22
various social media networks and you
0:25
can do it very easily so just go to
0:28
npmjs.com and just search for this
0:30
package react
0:33
Avatar and uh this is actually the
0:36
package here it's almost got 44,000
0:38
weekly downloads and this is actually
0:41
the command here I've already installed
0:43
it so I will just show you a very basic
0:46
example so just make a simple functional
0:50
component and first of all you need to
0:52
include this module so you say import
0:55
Avatar and it will be coming from this
0:58
package it is almost 20 8 kiloby
1:01
package and then we come to the jsx and
1:04
right here we can simply
1:07
display the AAR so I will just make it
1:10
in the center position so Flex
1:15
Direction I will just make the items
1:18
appear in the center
1:22
position justify content Center and I
1:25
will just give it a padding of 20 pixel
1:28
and if that's all so inside this you can
1:33
display very easily you provide this
1:35
Avatar component and it actually takes
1:38
some options so first of all you can
1:41
provide an Google ID so if you have a
1:44
Google
1:44
ID you can render
1:49
this so whatever is your Google account
1:52
you can mention this Google ID right
1:54
here you can mention the size and if you
1:57
want the round out icon
2:00
you can see it will Now display it so
2:03
for this you do need your Google ID so
2:05
whatever is your Google ID you need to
2:07
paste
2:17
it and then we can do the same thing for
2:21
Facebook and as well so Facebook also
2:26
has an ID here as
2:28
well and then you can mention the size
2:30
as well so it will look something like
2:33
this
2:34
so if you go to facebook.com and just go
2:38
to a
2:40
profile so whatever is your profile URL
2:43
you need to you can see This is My URL
2:46
so I will simply copy
2:48
this and you need to paste it here and I
2:52
think what it will do it will
2:58
fetch the profile picture of it so make
3:00
sure that it's a public account not a
3:02
private account
3:04
so it will fetch
3:12
this let me just make
3:18
a
3:21
public so just make sure that it it is
3:24
public not private
3:26
so you just need to paste this user name
3:30
or whatever is the public username and
3:33
it will it will fetch so just make sure
3:36
that the account is public and then same
3:39
we can do this for GitHub as well and
3:42
you can provide this GitHub handle so my
3:45
GitHub handle is this one so what it
3:47
will do it will fetch that profile
3:51
picture and show
3:54
it like this so here you provide your
3:57
GitHub handle so you will see will fetch
4:00
this GitHub
4:02
handle so I can just show you as well so
4:06
this is actually it is fetching it from
4:09
here automatically so you can see
4:16
that so in the similar way uh you can
4:21
even do it for
4:23
any social media networks so Twitter
4:28
Skype or any
4:31
you provide the handle and then you
4:33
provide the size and the roundness if
4:35
you want you'll see Twitter uh
4:39
Skype all these networks are supported
4:42
so one by one you can show it so it's a
4:44
very handy package and you can directly
4:47
use it by installing it I've shown you a
4:49
complete example so thank you very much
4:52
for watching this video and do check out
4:54
my website as well uh freem mediat
4:57
tools.com uh which contains thousands of
5:00
tools regarding audio video and image
5:03
and I will be seeing you in the next
5:05
video
#Skins, Themes & Wallpapers
#Social Network Apps & Add-Ons
#Social Networks
#Other
#Other