React.js Github API Username and Repositories UI Cards Component Using react-github-cards Library Full Example Project For Beginners

You are currently viewing React.js Github API Username and Repositories UI Cards Component Using react-github-cards Library Full Example Project For Beginners

 

 

Welcome folks today in this blog post we will be building a github user and repositories ui card component in react.js using react-github-cards. All the full source code of the application is given below.

 

 

Live Demo

 

 

React.js Github User and Repositories Cards Demo

 

 

Get Started

 

 

In order to get started we need to create a brand new github repository as shown below  to initialize a new react.js project

 

react-github-cards

A React compoent of github profile and repo cards.

 

DOWNLOAD SOURCE CODE

 

And also you can clone the github repository as shown below

 

git clone https://github.com/jkvim/react-github-cards.git

 

cd react-github-cards

 

npm install

 

npm start

 

The directory structure will look like this as shown below

 

 

 

Install

 

Now execute the below npm command to install the below library

 

npm i react-github-cards

 

Usage

Now copy paste the below code to the App.js file of your react.js project
App.js

Themes

 

currently, just have two kinds of themes, default and medium.

 

 

Authenticated request

 

to avoid Github Api Rate Limits simply provide an OAuth Client/Secret:

 

Components

  • <UserCard />
props required value
username yes string
clientId no string
clientSecret no string
  • <RepoCard />
props required value
username yes string
repo yes string
clientId no string
clientSecret no string

After this when you start the react.js application your game will start and the screenshot will look like this

 

Leave a Reply