react-repo-card-v2

The RepoCard component is designed to display GitHub repository information in a clean, visually appealing card format. It supports both light and dark modes and can show various repository details, including stars, forks, license information, and last update time.

Features

• Display GitHub repository details.
• Customizable to show/hide specific information.
• Supports dark and light themes.
• Responsive design.
• Direct integration with GitHub repository API data.

Installation

npm install react-repo-card-v2
# or
yarn add react-repo-card-v2

Usage

First, import the RepoCard component in your React project:

import { RepoCard } from 'react-repo-card-v2';

Direct API Use

The RepoCard component is designed to seamlessly integrate with the GitHub Repository API. You can directly pass the JSON response from the GitHub API to the repository prop of the RepoCard. This makes it incredibly easy to display repository information fetched from GitHub.

For example, after fetching data from the GitHub API:

<RepoCard
  repository={{
    name: 'Example Repository',
    description: 'This repository is an example of how to use the RepoCard component.',
    language: 'JavaScript',
    updated_at: '2023-01-01T00:00:00Z',
    html_url: 'https://github.com/yourusername/your-repository',
    license: { name: 'MIT' },
    open_issues_count: 10,
    stargazers_count: 100,
    forks_count: 20,
  }}
  showCodeLanguage={true}
  showLicense={true}
  showIssues={true}
  showStars={true}
  showForks={true}
  showUpdatedAt={true}
  showCodeColorBar={true}
  repoInfoColor="grey"
  darkMode={false}
/>

Props

Prop	Type	Description	Default
repository	Object	The JSON response object from the GitHub repository API. No need for manual data mapping.	-
showCodeLanguage	boolean	Show the primary language of the repository.	true
showLicense	boolean	Show the license information.	true
showIssues	boolean	Show the number of open issues.	true
showStars	boolean	Show the star count.	true
showForks	boolean	Show the fork count.	true
showUpdatedAt	boolean	Show the last update timestamp.	true
showCodeColorBar	boolean	Show a color bar representing the code language.	true
repoInfoColor	string	Text color for the repository information.	'grey'
darkMode	boolean	Enable dark mode for the card.	false

Customization

You can customize the appearance of the RepoCard by using the repoInfoColor and darkMode props. Additionally, you can choose which pieces of information to display by setting the corresponding props to true or false.

Contributing

We welcome contributions to improve this component! Please feel free to submit issues or pull requests to our GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.