@jmondi/github-ui

A React component library for displaying GitHub contributors and sponsors with a modern UI.

Features

• Display GitHub repository contributors
• Show GitHub sponsors for a user
• Responsive and customizable UI
• Built with React and Tailwind CSS
• Efficient data fetching with SWR

Installation

npm install @jmondi/github-ui
# or
yarn add @jmondi/github-ui
# or
pnpm add @jmondi/github-ui

Usage

Contributors Component

import { Contributors } from '@jmondi/github-ui/contributors';
import '@jmondi/github-ui/style.css';

function MyComponent() {
  return (
    <Contributors
      owner="facebook"
      repo="react"
      refreshInterval={3600000} // Optional: 1 hour in milliseconds
    />
  );
}

Sponsors Component

import { Sponsors } from '@jmondi/github-ui/sponsors';
import '@jmondi/github-ui/style.css';

function MyComponent() {
  return (
    <Sponsors
      username="octocat"
      refreshInterval={3600000} // Optional: 1 hour in milliseconds
    />
  );
}

API

Contributors Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | owner | string | - | GitHub repository owner | | repo | string | - | GitHub repository name | | refreshInterval | number | 3600000 | Data refresh interval in milliseconds |

Sponsors Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | username | string | - | GitHub username | | refreshInterval | number | 3600000 | Data refresh interval in milliseconds |

Development

1. Clone the repository
2. Install dependencies: pnpm install
3. Build the project: pnpm build
4. Format code: pnpm format

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Would you like me to explain or elaborate on any part of this README?