React-repo-widget NPM

react-repo-widget

forthebadge

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 🍕

Install
```
npm i react-repo-widget
```

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";

Use

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

<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.