https://github.com/jasonraimondi/react-github-ui
A React component library for displaying GitHub contributors and sponsors. Preview on tsoauth2server.com
https://github.com/jasonraimondi/react-github-ui
github github-contributors github-sponsors react react-component
Last synced: 7 months ago
JSON representation
A React component library for displaying GitHub contributors and sponsors. Preview on tsoauth2server.com
- Host: GitHub
- URL: https://github.com/jasonraimondi/react-github-ui
- Owner: jasonraimondi
- License: mit
- Created: 2024-07-06T02:50:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-10T02:57:53.000Z (over 1 year ago)
- Last Synced: 2025-01-04T21:44:20.628Z (about 1 year ago)
- Topics: github, github-contributors, github-sponsors, react, react-component
- Language: TypeScript
- Homepage:
- Size: 84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @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
```bash
npm install @jmondi/github-ui
# or
yarn add @jmondi/github-ui
# or
pnpm add @jmondi/github-ui
```
## Usage
### Contributors Component
```jsx
import { Contributors } from '@jmondi/github-ui/contributors';
import '@jmondi/github-ui/style.css';
function MyComponent() {
return (
);
}
```
### Sponsors Component
```jsx
import { Sponsors } from '@jmondi/github-ui/sponsors';
import '@jmondi/github-ui/style.css';
function MyComponent() {
return (
);
}
```
## 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?