Up next in 10
Build React.js Github API Button Generator to Follow,Sponsor & Download Github Repositories in JS
Dec 22, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-react-js-github-api-button-generator-to-followsponsor-download-github-repositories-in-js/
Show More Show Less View Video Transcript
0:06
Uh hello friends, today in this tutorial
0:08
I will be showing you a new library of
0:11
ReactJS through which you will be able
0:13
to create GitHub buttons for various
0:17
purposes. Let's suppose you want to
0:19
follow someone on GitHub or sponsor any
0:21
sort of repository or download it. So
0:24
all such buttons are available. So this
0:26
is a uh simple demo. Here you will see
0:29
that uh basically you can change the
0:32
username to let's suppose this username.
0:36
This is my username GitHub username. So
0:39
if I click this I will be redirected to
0:42
my uh profile GitHub profile here. So
0:46
here you can follow me like this. So
0:49
basically uh there is some kind of you
0:52
can see here you just need to change
0:54
this label of this button of GitHub
0:56
button. So this will change to follow.
0:59
So there are various kinds of buttons
1:01
inside GitHub that you can use inside
1:03
your ReactJS application. You can embed
1:05
them. So one such website is uh uh
1:09
buttons.github.io.
1:10
So bas basically there are various
1:12
buttons out there which is uh follow
1:15
button, sponsor button, watch button.
1:18
You can also start any sort of
1:20
repository, fork, issue, discuss. You
1:24
can also download any sort of uh GitHub
1:27
repository
1:28
and uh you can see all such buttons are
1:31
there. You need to provide this username
1:34
GitHub username and uh dynamically this
1:37
will put this button here like this. So
1:41
here you can just copy paste this source
1:42
code and paste it right here where you
1:46
are building this application.
1:49
So you can select the light
1:52
contrast. You can change the theme of
1:55
the button like this.
2:00
If you want large button like this, you
2:02
can put the large button here. If you
2:05
want to also show the count as well, you
2:07
can also show the count standard icon.
2:11
[snorts] So you can customize all these
2:13
settings if you want to. syntax. Uh this
2:17
totally depends upon which syntax you
2:19
want. Uh let me
2:24
if you want a syntax inside which uh
2:28
you want HTML you can select HTML. If
2:31
you want uh React GitHub button you can
2:34
select this one. So here you just need
2:36
to copy this. So wherever you are
2:38
building your ReactJS application so
2:41
simply you need to copy this. So paste
2:43
it here.
2:48
So simply paste it. And now basically if
2:51
you refresh your ReactJS application you
2:53
will see this is embedded here. This is
2:56
uh it is showing the number of followers
2:58
which the user has. So I am having 114
3:01
followers on GitHub. So this is exactly
3:05
that the functionality that we want. So
3:08
if anyone wants to follow you can simply
3:10
click the follow button and it will be
3:12
redirected to the repository. So this is
3:16
suitable for any URL. So basically you
3:18
can go to GitHub and you can just uh put
3:23
the
3:24
this is a username that you want to put
3:26
here. Simply copy this username and go
3:29
to this tool. So simply paste it.
3:34
And now basically you will see that
3:39
it has zero followers. So you can just
3:41
see it is appearing zero here. So in
3:45
this way guys you can do this. You can
3:46
also build out more buttons such as
3:48
sponsor button. If you want to sponsor
3:51
any sort of repository you need to uh
3:54
put this sponsor button. So if you just
3:58
paste this code here.
4:08
So if you refresh it now this is a
4:10
sponsor button. You will see that if you
4:12
click sponsor it will be redirected to
4:15
the website. So all such buttons are
4:18
available to you guys. You can see fork
4:20
issue. So basically you can use this
4:23
website to generate the dynamic code. So
4:28
for this we are using this dependency
4:30
which is react github button which is uh
4:33
you can see it has 12,000 weekly
4:36
downloads. So it's a very simple
4:39
library. So just go to the command line
4:41
and simply install this. So npmi
4:45
react github button.
4:50
So just install this. So after this
4:54
there is a slight instruction inside
4:56
your reacts. Simply put the username of
4:58
the username here github.com. So put the
5:02
username
5:04
and uh change it to any label of your
5:07
choice.
5:11
And at the very first line you need to
5:13
import this library using import
5:15
statement. So just import it from react
5:18
GitHub button. So if you just import
5:20
this you will see that uh now there will
5:24
be a follow button
5:26
which will be available to you. So you
5:29
need to start this application.
5:34
So this is the overall dependencies
5:37
guys. You can just uh embed any sort of
5:40
button inside your uh
5:45
I think we missed this one. So that was
5:48
the error.
5:51
So you can see follow button.
5:54
So this is using the GitHub API to embed
5:58
certain buttons. So first of all you can
6:00
go to this website just generate the
6:03
code and simply paste it. So in the
6:05
background we are using this library
6:07
which is React GitHub button. So I have
6:10
given all the source code in the video
6:11
description guys. So just go to the blog
6:13
post and download all the source code.
6:16
Please hit the like button, subscribe
6:18
the channel and I will be seeing you in
6:21
the next video.