react-github-scraper

Provides multiple customizable components to display data about a github repository using simply the repository name

Usage no npm install needed!

<script type="module">
  import reactGithubScraper from 'https://cdn.skypack.dev/react-github-scraper';
</script>

README

react-github-scraper 👋

Provides multiple customizable components to automatically load and display GitHub repositories data by just passing the targeted repository!

Installation

npm i react-github-scraper

Demo & API 👀

https://axelmy-projects-showcase.firebaseapp.com/react-github-scraper (...with code 😉)

Components

  • GithubScraper
    • Contributors
    • StargazersCount
    • WatchersCount
    • Topics
    • Languages
    • ForksCount
    • MemberSince
    • OwnerAvatar
    • OwnerFollowersCount
    • PublicReposCount
    • PushedAt
    • Size

Usage 💻

import GithubScraper, { Languages, StargazersCount } from 'react-github-scraper';

const Example = () => {
    return (
        <GithubScraper 
            username='axelmy318' 
            repository='react-github-scraper' 
            branch='master'
        >
            <StargazersCount prefix="⭐&nbsp;" label={'Stargazers count'} />
            <Languages label={'Languages'} />
            <Topics label={'Topics'} />
            <Contributors label={'Contributors'} />
            <PushedAt label={'Last push'} />
            <Size label={'Size'} />
        </GithubScraper>
    )
}


export default Example

Configuration

To know what is the targeted repository, you have to wrap your components into <GithubScraper> and pass it the username, repository, and optionally branch as props.

Common props

  • label: every components has it. It defines the title written above the data
  • prefix: some components allow you to use a prefix, to put right before the data. See the <StargazersCount /> component for some examples.

Screenshots

Here is what you can get by mixing some of your own CSS with the example in the "Usage" section

screenshot1

Todos

  • Create a wrapper to provide the github repository only once
  • Create a class shared to all the components to prevent fetching the same data twice
  • List repository languages
  • List repository topics
  • List repository contributors
  • Display repository counts (stargazers, watchers, forks)
  • Display repository dates (last pushed, last commit, ...)
  • Provide theme to the <GithubScraper> component so that it automatically applies to all children
  • Create a parameter to not render the component if there is no data (IE: don't render <Topics /> if there are none)