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

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

See also  React.js PDFMake.js Example to Export PDF Document From HTML5 Template in Browser Using react-pdfmake Library & TypeScript Full Project For Beginners

 

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
//import { UserCard, RepoCard } from 'react-github-cards';
//import 'react-github-cards/dist/medium.css';

// use medium theme
import { UserCard, RepoCard } from 'react-github-cards/dist/medium'
import 'react-github-cards/dist/medium.css';


export default function App() {
  return (
    <div className="App">
      <div>
    <UserCard username="gauti123456" />
    <RepoCard username="gauti123456" repo="ElectronRemoveAudio" />
  </div>
    </div>
  );
}

Themes

 

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

 

See also  React.js useRef Hook Practical Tutorial with Examples of Form Input and State Handling 2020

 

Authenticated request

 

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

 

import { UserCard, RepoCard } from 'react-github-cards';

render() {
  <div>
    <UserCard username="foo" clientId="foo" clientSecret="bar" />
    <RepoCard username="foo" repo="bar"  clientId="foo" clientSecret="bar"/>
  </div>
}

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

See also  React.js Youtube Data API V3 Search Videos Autocomplete by Keyword Using Functional Components Full Example For Beginners

 

Leave a Reply