github-contributions-ui 1.0.14 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/readme.md +105 -5
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,15 +1,115 @@
|
|
|
1
1
|
# github-contributions-ui
|
|
2
2
|
|
|
3
|
-
GitHub contributions graph React
|
|
3
|
+
Display a **GitHub-style contributions graph** anywhere in your React or Next.js application.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
A lightweight, plug-and-play component designed for developer portfolios, dashboards, and personal websites.
|
|
6
6
|
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## ✨ Features
|
|
10
|
+
|
|
11
|
+
* GitHub-style contribution heatmap
|
|
12
|
+
* Plug-and-play setup
|
|
13
|
+
* Works with **React** and **Next.js**
|
|
14
|
+
* No API keys required
|
|
15
|
+
* Lightweight and fast
|
|
16
|
+
* Theme support
|
|
17
|
+
* Fully client-side
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## 📦 Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
7
24
|
npm install github-contributions-ui
|
|
25
|
+
```
|
|
8
26
|
|
|
9
|
-
|
|
27
|
+
---
|
|
10
28
|
|
|
29
|
+
## 🚀 Quick Start
|
|
30
|
+
|
|
31
|
+
### Next.js (App Router)
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
11
34
|
"use client";
|
|
35
|
+
|
|
12
36
|
import { GithubActivity } from "github-contributions-ui";
|
|
13
|
-
import "github-contributions-ui/styles.css";
|
|
14
37
|
|
|
15
|
-
|
|
38
|
+
export default function Page() {
|
|
39
|
+
return <GithubActivity username="octocat" theme="blue" />;
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
### React (Vite / CRA)
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import { GithubActivity } from "github-contributions-ui";
|
|
49
|
+
|
|
50
|
+
function App() {
|
|
51
|
+
return <GithubActivity username="octocat" theme="blue" />;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export default App;
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## ⚙️ Props
|
|
60
|
+
|
|
61
|
+
| Prop | Type | Required | Description |
|
|
62
|
+
| ---------- | ----------------------------------------- | -------- | --------------------------- |
|
|
63
|
+
| `username` | string | ✅ | GitHub username |
|
|
64
|
+
| `theme` | `"light" \| "dark" \| "blue" \| "purple"` | ❌ | UI theme (default: `light`) |
|
|
65
|
+
|
|
66
|
+
### Example
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
<GithubActivity
|
|
70
|
+
username="octocat"
|
|
71
|
+
theme="dark"
|
|
72
|
+
/>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## 🎨 Available Themes
|
|
78
|
+
|
|
79
|
+
* `light`
|
|
80
|
+
* `dark`
|
|
81
|
+
* `blue`
|
|
82
|
+
* `purple`
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## 🌐 Live Demo
|
|
87
|
+
|
|
88
|
+
Try it instantly:
|
|
89
|
+
|
|
90
|
+
👉 https://github-contributions-ui.vercel.app/
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## 💡 Use Cases
|
|
95
|
+
|
|
96
|
+
* Developer portfolios
|
|
97
|
+
* Personal websites
|
|
98
|
+
* SaaS dashboards
|
|
99
|
+
* Resume websites
|
|
100
|
+
* Developer profiles
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## 🧱 Built With
|
|
105
|
+
|
|
106
|
+
* React
|
|
107
|
+
* TypeScript
|
|
108
|
+
* Next.js
|
|
109
|
+
* Tailwind CSS
|
|
110
|
+
|
|
111
|
+
## ☕ Support
|
|
112
|
+
|
|
113
|
+
<a href="https://buymeacoffee.com/bichitrabehera" target="_blank">
|
|
114
|
+
<img src="https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20coffee&emoji=☕&slug=your-username&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" />
|
|
115
|
+
</a>
|