react-native-popify 0.1.0 â 0.1.1
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 +62 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,6 +15,68 @@ A lightweight, zero-dependency UI library that provides **stunning alert dialogs
|
|
|
15
15
|
|
|
16
16
|
---
|
|
17
17
|
|
|
18
|
+
## đą Demo
|
|
19
|
+
|
|
20
|
+
<div align="center">
|
|
21
|
+
|
|
22
|
+
### App Preview
|
|
23
|
+
|
|
24
|
+
<p>
|
|
25
|
+
<img src="docs/demos/app-home-alerts.png" width="260" alt="Popify â Alert Types" />
|
|
26
|
+
|
|
27
|
+
<img src="docs/demos/app-home-features.png" width="260" alt="Popify â Features & Toasts" />
|
|
28
|
+
</p>
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
### đ Alerts in Action
|
|
33
|
+
|
|
34
|
+
<table>
|
|
35
|
+
<tr>
|
|
36
|
+
<td align="center"><strong>â
Success Alert</strong></td>
|
|
37
|
+
<td align="center"><strong>âšī¸ Info Alert</strong></td>
|
|
38
|
+
</tr>
|
|
39
|
+
<tr>
|
|
40
|
+
<td><img src="docs/demos/success-alert.gif" width="260" alt="Success Alert" /></td>
|
|
41
|
+
<td><img src="docs/demos/info-alert.gif" width="260" alt="Info Alert" /></td>
|
|
42
|
+
</tr>
|
|
43
|
+
<tr>
|
|
44
|
+
<td align="center"><strong>đ Particle Burst</strong></td>
|
|
45
|
+
<td align="center"><strong>âąī¸ Auto-Close Timer</strong></td>
|
|
46
|
+
</tr>
|
|
47
|
+
<tr>
|
|
48
|
+
<td><img src="docs/demos/particle-burst.gif" width="260" alt="Particle Burst" /></td>
|
|
49
|
+
<td><img src="docs/demos/auto-close.gif" width="260" alt="Auto Close Timer" /></td>
|
|
50
|
+
</tr>
|
|
51
|
+
<tr>
|
|
52
|
+
<td align="center" colspan="2"><strong>đ Dark Theme</strong></td>
|
|
53
|
+
</tr>
|
|
54
|
+
<tr>
|
|
55
|
+
<td align="center" colspan="2"><img src="docs/demos/dark-theme.gif" width="260" alt="Dark Theme" /></td>
|
|
56
|
+
</tr>
|
|
57
|
+
</table>
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
### đ Toasts in Action
|
|
62
|
+
|
|
63
|
+
<table>
|
|
64
|
+
<tr>
|
|
65
|
+
<td align="center"><strong>â
Success Toast</strong></td>
|
|
66
|
+
<td align="center"><strong>â Error Toast</strong></td>
|
|
67
|
+
<td align="center"><strong>âŦī¸ Bottom Toast</strong></td>
|
|
68
|
+
</tr>
|
|
69
|
+
<tr>
|
|
70
|
+
<td><img src="docs/demos/toast-success.gif" width="220" alt="Success Toast" /></td>
|
|
71
|
+
<td><img src="docs/demos/toast-error.gif" width="220" alt="Error Toast" /></td>
|
|
72
|
+
<td><img src="docs/demos/toast-bottom.gif" width="220" alt="Bottom Toast" /></td>
|
|
73
|
+
</tr>
|
|
74
|
+
</table>
|
|
75
|
+
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
18
80
|
## ⨠Features
|
|
19
81
|
|
|
20
82
|
- **4 Alert types** â `success`, `error`, `warning`, `info` with unique colors & icons
|