React-github-embed NPM

How to Install

npm i react-github-embed

Get your Personal Access Token by signing in to your github account and then go to your setting -> developer setting -> Personal access tokens -> Generate new token. Add it to .env file in the root directory.

REACT_APP_GITHUB_TOKEN = <YOUR_GITHUB_TOKEN>

Demo & Playground

Components

Repository

import React from 'react';
import { Repository } from 'react-github-embed';

const RepositoryCard = () => {
  return (
    <div>
      <Repository
        username="facebook"
        repository="react"
        theme="light"
        showStarCount={true}
        showForkCount={true}
        showLanguage={true}
        showDescription={true}
        showType={true}
      />
      <Repository username="Mridul2820" repository="css-js" theme="light" />
      <Repository
        username="Mridul2820"
        repository="next-template"
        theme="dark"
      />
    </div>
  );
};

export default RepositoryCard;

Options

Property	Type	Description
username(required)	string	Username of the Github User
repository(required)	string	Repository of the Github User
theme	string	Theme of the card `"light"` or `"dark"`Deafults to `"light"`
showStarCount	bool	When `true`, shows the total star count of repository.Defaults to `true`
showForkCount	bool	When `true`, shows the total fork count of repository.Defaults to `true`
showLanguage	bool	When `true`, shows the main language of repository.Defaults to `true`
showDescription	bool	When `true`, shows the description of repository.Defaults to `true`
showType	bool	When `true`, shows the type of repository.`Public template` `Private template` `Private` `Public` `Forked`Defaults to `true`

Star Count

import React from 'react';
import { StarCount } from 'react-github-embed';

const StarCountCard = () => {
  return (
    <StarCount
      username="facebook"
      repository="react"
      theme="light"
      iconText="Star"
      formatNumber={true}
    />
  );
};

export default RepositoryCard;

Property	Type	Description
username(required)	string	Username of the Github User
repository(required)	string	Repository of the Github User
theme	string	Theme of the card `"light"` or `"dark"`Deafults to `"light"`
iconText	string	Text to display on the card.Defaults to `Star`
formatNumber	bool	When `true`, shows the total star count formatted.Defaults to `true`

Fork Count

import React from 'react';
import { ForkCount } from 'react-github-embed';

const ForkCountCard = () => {
  return (
    <ForkCount
      username="facebook"
      repository="react"
      theme="light"
      iconText="Fork"
      formatNumber={true}
    />
  );
};

export default RepositoryCard;

Property	Type	Description
username(required)	string	Username of the Github User
repository(required)	string	Repository of the Github User
theme	string	Theme of the card `"light"` or `"dark"`Deafults to `"light"`
iconText	string	Text to display on the card.Defaults to `Star`
formatNumber	bool	When `true`, shows the total fork count formatted.Defaults to `true`