react-achievements 4.0.0 → 4.1.0
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/README.md +27 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,6 +6,16 @@
|
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/react-achievements) [-blue.svg)](./LICENSE) [](https://www.typescriptlang.org/)
|
|
8
8
|
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="https://github.com/dave-b-b/react-achievements/raw/main/assets/Demo.mov">
|
|
11
|
+
<img
|
|
12
|
+
src="https://raw.githubusercontent.com/dave-b-b/react-achievements/main/assets/compact.png"
|
|
13
|
+
alt="React Achievements demo showing a LearnQuest achievements modal"
|
|
14
|
+
width="900"
|
|
15
|
+
/>
|
|
16
|
+
</a>
|
|
17
|
+
</p>
|
|
18
|
+
|
|
9
19
|
## Installation
|
|
10
20
|
|
|
11
21
|
```bash
|
|
@@ -81,16 +91,31 @@ import {
|
|
|
81
91
|
// Inline nav, drawer, sidebar, or profile menu item
|
|
82
92
|
<AchievementsWidget placement="inline" label="Badges" />
|
|
83
93
|
|
|
94
|
+
// Compact square badge grid for dense achievement catalogs
|
|
95
|
+
<AchievementsWidget density="compact" />
|
|
96
|
+
|
|
97
|
+
// Optional: blur the page behind the modal
|
|
98
|
+
<AchievementsWidget modalBackdropBlur={2} />
|
|
99
|
+
|
|
84
100
|
// Existing button or drawer row that opens the built-in modal
|
|
85
101
|
const [open, setOpen] = useState(false);
|
|
86
102
|
|
|
87
103
|
<button onClick={() => setOpen(true)}>View achievements</button>
|
|
88
|
-
|
|
104
|
+
|
|
105
|
+
// Optional: hide scrollbar chrome while preserving scroll
|
|
106
|
+
<AchievementsModal
|
|
107
|
+
isOpen={open}
|
|
108
|
+
onClose={() => setOpen(false)}
|
|
109
|
+
hideScrollbar
|
|
110
|
+
backdropBlur={2}
|
|
111
|
+
/>
|
|
89
112
|
|
|
90
113
|
// Inline achievements page, panel, drawer, or settings section
|
|
91
114
|
<AchievementsList showLocked />
|
|
92
115
|
```
|
|
93
116
|
|
|
117
|
+
For modal blur props, pass a number for pixels or a CSS length string. Omit the prop or pass `0` when you do not want backdrop blur.
|
|
118
|
+
|
|
94
119
|
Storybook includes examples for floating buttons, nav buttons, drawer rows, existing controls that open a modal, dashboard cards, profile menus, and inline lists.
|
|
95
120
|
|
|
96
121
|
Provider-level icons and UI options are shared across notifications, widgets, modals, and lists:
|
|
@@ -200,7 +225,7 @@ export function App() {
|
|
|
200
225
|
}
|
|
201
226
|
```
|
|
202
227
|
|
|
203
|
-
React Native UI components are not included in
|
|
228
|
+
React Native UI components are not included in the web package; use `achievements-engine` or the `/headless` React APIs with your own native UI.
|
|
204
229
|
|
|
205
230
|
## Entry Points
|
|
206
231
|
|