rdwz / react-github-scraper

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

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
  • Repository related
    • Contributors
    • ForksCount
    • Languages
    • PushedAt
    • Size
    • StargazersCount
    • Topics
    • WatchersCount
  • User related
    • MemberSince
    • OwnerAvatar
    • OwnerFollowersCount
    • PublicReposCount

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

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)