few-ticket-widget 1.0.1 → 1.0.2
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 +68 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,3 +30,71 @@ npm install few-ticket-widget
|
|
|
30
30
|
or
|
|
31
31
|
|
|
32
32
|
yarn add ticket-widge
|
|
33
|
+
|
|
34
|
+
React Usage
|
|
35
|
+
|
|
36
|
+
import TicketWidget from 'ticket-widget';
|
|
37
|
+
|
|
38
|
+
<TicketWidget
|
|
39
|
+
eventSlug="groove-&-chill-with-ayode"
|
|
40
|
+
theme="dark"
|
|
41
|
+
height={700}
|
|
42
|
+
baseUrl="https://yourdomain.com"
|
|
43
|
+
/>;
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
Props
|
|
48
|
+
Prop Type Required Default Description
|
|
49
|
+
eventSlug string ✅ Yes — Unique event identifier
|
|
50
|
+
theme 'light' | 'dark' No light Widget theme
|
|
51
|
+
width string | number No 100% Widget width
|
|
52
|
+
height number No 700 Widget height
|
|
53
|
+
baseUrl string No — Checkout base URL
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
🌍 Plain HTML / Vanilla JavaScript Usage
|
|
58
|
+
Step 1: Add container
|
|
59
|
+
html
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
<div id="ticket-widget"></div>
|
|
63
|
+
Step 2: Load widget script (CDN)
|
|
64
|
+
html
|
|
65
|
+
e
|
|
66
|
+
<script src="https://cdn.jsdelivr.net/npm/ticket-widget/dist/embed-ticket-widget.js"></script>
|
|
67
|
+
Step 3: Initialize widget
|
|
68
|
+
html
|
|
69
|
+
|
|
70
|
+
<script>
|
|
71
|
+
TicketWidget.create({
|
|
72
|
+
id: 'ticket-widget',
|
|
73
|
+
eventSlug: 'groove-&-chill-with-ayode',
|
|
74
|
+
theme: 'dark',
|
|
75
|
+
height: 700,
|
|
76
|
+
baseUrl: 'https://yourdomain.com'
|
|
77
|
+
});
|
|
78
|
+
</script>
|
|
79
|
+
🧠 TypeScript Support
|
|
80
|
+
This package ships with built-in TypeScript definitions.
|
|
81
|
+
|
|
82
|
+
React (TypeScript)
|
|
83
|
+
|
|
84
|
+
import TicketWidget from 'ticket-widget';
|
|
85
|
+
|
|
86
|
+
<TicketWidget eventSlug="my-event" theme="dark" />;
|
|
87
|
+
Vanilla TypeScript
|
|
88
|
+
ts
|
|
89
|
+
Copy code
|
|
90
|
+
window.TicketWidget.create({
|
|
91
|
+
id: 'ticket',
|
|
92
|
+
eventSlug: 'my-event'
|
|
93
|
+
});
|
|
94
|
+
TypeScript users get autocomplete, type safety, and IntelliSense out of the box.
|
|
95
|
+
|
|
96
|
+
🌐 CDN URLs
|
|
97
|
+
You may use either CDN:
|
|
98
|
+
|
|
99
|
+
https://cdn.jsdelivr.net/npm/ticket-widget/dist/embed-ticket-widget.js
|
|
100
|
+
https://unpkg.com/ticket-widget/dist/embed-ticket-widget.js
|