https://github.com/axelmy318/react-github-scraper

Provides multiple customizable components to automatically load and display GitHub repositories data by just passing the targeted repository!
https://github.com/axelmy318/react-github-scraper

axios fetch github github-api javascript nodejs react reactjs

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/axelmy318/react-github-scraper
• Owner: axelmy318
• Created: 2022-01-25T07:52:14.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T16:02:43.000Z (almost 2 years ago)
• Last Synced: 2024-07-17T18:16:54.045Z (2 months ago)
• Topics: axios, fetch, github, github-api, javascript, nodejs, react, reactjs
• Language: JavaScript
• Homepage: https://axelmy-projects-showcase.firebaseapp.com/react-github-scraper
• Size: 658 KB
• Stars: 2
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# react-github-scraper 👋

Provides multiple customizable components to automatically load and display data from the Github API by just passing the targeted repository!

## Installation

`npm i react-github-scraper`

## Demo & API 👀

[https://axelmry.com/react-github-scraper](https://axelmry.com/react-github-scraper) (...with code 😉)

## Components

- GithubScraper

    - Repository related

        - Contributors

        - ForksCount

        - Languages

        - PushedAt

        - Size

        - StargazersCount

        - Topics

        - WatchersCount

        - Commits

    - User related

        - MemberSince

        - OwnerAvatar

        - OwnerFollowersCount

        - PublicReposCount

## Usage 💻

```javascript

import GithubScraper, { 

    Languages, 

    StargazersCount, 

    Topics, PushedAt, 

    Contributors, 

    Size 

} from 'react-github-scraper';

const Example = () => {

    return (

        

            

            

            

            

            

            

        

    )

}

export default Example

```

## Configuration

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

## Screenshots

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

![screenshot1](https://i.imgur.com/AqfIWku.png)