react-repo-widget

A beautiful card that displays Github repository infos.

Demo Show

• Online Demo Website

• Local

  git clone https://github.com/saj96n/react-repo-widget.git
  cd react-repo-widget
  npm i
  npm start

  open localhost:3001

How to Use 🍕

1. Install

   npm i react-repo-widget

2. Import one component

   import { RepoCard } from "react-repo-widget"; // Pass repo data to the component
   import { RepoCardFetch } from "react-repo-widget"; // Fetch data from the GitHub
   
   import "react-repo-widget/dist-esm/styles.css";

3. Use

   <RepoCardFetch login={username} reponame={repository}>

   or

   <RepoCard repo={repoData} />

   repo prop data structure:

   repo: {
     name: string;
     owner: {
       avatarUrl: string;
       login: string;
     }
     description: string;
     forks: {
       totalCount: number;
     }
     primaryLanguage: {
       name: string;
     }
     licenseInfo: {
       spdxId: string;
     }
     pushedAt: string;
     stargazerCount: number;
     watchers: {
       totalCount: number;
     }
   }

Settings 🔨

Parameter	Type	Default	Description
login	String	""	GitHub username. Required for RepoCardFetch component!
reponame	String	""	Repository name. Required for RepoCardFetch component!
repo	Object	""	Repository data. Required for RepoCard component!
className	String	"repo-widget"	Widget className
center	Boolean	false	If card is aligned center.
squareAvatar	Boolean	false	If avatar is displayed with square outline.
descriptionLine	Number	2	The maximum line of repo description.
showLanguage	Boolean	true	If the repo language is displayed.
showLicense	Boolean	true	If the repo license is displayed.