React GitHub Repos

A React component library for displaying GitHub repositories with various customization options.

Installation

npm install react-repos-github
# or
yarn add react-repos-github

Features

• Display single or multiple GitHub repositories
• Configurable display options (stars, forks, language, etc.)
• Built-in sorting and filtering capabilities
• Responsive grid layout
• Pagination support
• Accessible UI components
• GitHub-like styling
• Rate limit handling
• Support for pre-fetched data

Usage

Display a Single Repository

import { ReactGithubRepo } from 'react-repos-github';

function App() {
  return (
    <ReactGithubRepo 
      user="facebook" 
      repo="react" 
    />
  );
}

Display Multiple Repositories

import { ReactGithubRepos } from 'react-repos-github';

function App() {
  return (
    <ReactGithubRepos 
      user="facebook"
      enableSorting={true}
      enableFiltering={true}
      itemsPerPage={6}
    />
  );
}

Storybook

The library includes a Storybook setup to help you explore and test the components interactively. To run Storybook locally:

# Clone the repository
git clone https://github.com/yourusername/react-repos-github.git
cd react-repos-github

# Install dependencies
npm install

# Start Storybook
npm run storybook

This will launch Storybook at http://localhost:6006 where you can:

• View different component variations
• Adjust component props in real-time
• See documentation and examples

You can also view the deployed Storybook at: https://galkremer1.github.io/react-repos-github

Deployment

This project uses GitHub Actions to automatically deploy the Storybook documentation to GitHub Pages whenever changes are pushed to the main branch.

The workflow does the following:

• Builds the Storybook site
• Deploys it to the gh-pages branch
• Makes it available at https://galkremer1.github.io/react-repos-github

To make changes to the deployment process, edit the workflow file at .github/workflows/deploy.yml.

Components

<ReactGithubRepo />

Displays a single GitHub repository.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | user | string | (Required) | GitHub username | | repo | string | (Required) | Repository name | | showName | boolean | true | Show repository name | | showDescription | boolean | true | Show repository description | | showStars | boolean | true | Show star count | | showForks | boolean | true | Show fork count | | showLanguage | boolean | true | Show primary language | | showLastUpdated | boolean | true | Show last updated time | | className | string | '' | Additional CSS class for the wrapper | | cardClassName | string | '' | Additional CSS class for the card | | onRepoClick | (repo) => void | Opens GitHub page | Callback when repository is clicked | | onError | (error) => void | - | Callback when an error occurs | | usePreFetchedData | boolean | false | Use pre-fetched data instead of API | | preFetchedData | Repository | - | Pre-fetched repository data |

<ReactGithubRepos />

Displays multiple GitHub repositories in a grid layout.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | user | string | (Required) | GitHub username | | repos | string[] | - | Specific repositories to display | | excludedRepos | string[] | - | Repositories to exclude | | showName | boolean | true | Show repository names | | showDescription | boolean | true | Show repository descriptions | | showStars | boolean | true | Show star counts | | showForks | boolean | true | Show fork counts | | showLanguage | boolean | true | Show primary languages | | showLastUpdated | boolean | true | Show last updated times | | className | string | '' | Additional CSS class for the wrapper | | cardClassName | string | '' | Additional CSS class for the cards | | enableSorting | boolean | true | Enable sorting controls | | enableFiltering | boolean | true | Enable filtering input | | sortBy | 'stars' \| 'forks' \| 'updated' | 'stars' | Default sort field | | sortDirection | 'asc' \| 'desc' | 'desc' | Default sort direction | | itemsPerPage | number | 6 | Number of repos per page | | onRepoClick | (repo) => void | Opens GitHub page | Callback when repository is clicked | | onError | (error) => void | - | Callback when an error occurs | | usePreFetchedData | boolean | false | Use pre-fetched data instead of API | | preFetchedData | Repository[] | - | Pre-fetched repositories data |

Advanced Usage

Using Pre-fetched Data

import { ReactGithubRepos } from 'react-repos-github';

function App() {
  const repoData = [
    {
      id: 10270250,
      name: "react",
      full_name: "facebook/react",
      html_url: "https://github.com/facebook/react",
      description: "A declarative, efficient, and flexible JavaScript library for building user interfaces.",
      stargazers_count: 180000,
      forks_count: 37000,
      language: "JavaScript",
      // ... other GitHub repository fields
    },
    // ... more repositories
  ];

  return (
    <ReactGithubRepos 
      user="facebook"
      usePreFetchedData={true}
      preFetchedData={repoData}
    />
  );
}

Direct Hooks Access

The library also exports hooks for direct access to the GitHub data:

import { useGithubRepo, useGithubRepos } from 'react-repos-github';

function CustomComponent() {
  const { repository, loading, error } = useGithubRepo({ 
    user: 'facebook', 
    repo: 'react' 
  });
  
  // Or for multiple repositories
  const { repositories, loading, error } = useGithubRepos({ 
    user: 'facebook',
    sortBy: 'stars',
    sortDirection: 'desc'
  });
  
  // ...custom rendering logic
}

Type Definitions

The library includes comprehensive TypeScript definitions for all components and data structures.

Browser Support

• Chrome, Firefox, Safari, Edge (latest 2 versions)
• Internet Explorer is not supported

License

MIT License