few-ticket-widget 1.0.0 → 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 +100 -0
- package/package.json +5 -3
package/README.md
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# 🎟️ Ticket Widget
|
|
2
|
+
|
|
3
|
+
A lightweight, embeddable ticket checkout widget that works in:
|
|
4
|
+
|
|
5
|
+
- ✅ React (JavaScript & TypeScript)
|
|
6
|
+
- ✅ Plain HTML / Vanilla JavaScript
|
|
7
|
+
- ✅ Any framework (Next.js, Vue, Angular, etc.)
|
|
8
|
+
- ✅ CDN embeds (no build tools required)
|
|
9
|
+
|
|
10
|
+
Perfect for event platforms, ticketing systems, and white-label integrations.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## ✨ Features
|
|
15
|
+
|
|
16
|
+
- Inline iframe checkout (no popups)
|
|
17
|
+
- Dynamic event slugs
|
|
18
|
+
- Light / Dark themes
|
|
19
|
+
- React component + Vanilla JS API
|
|
20
|
+
- TypeScript support with full typings
|
|
21
|
+
- CDN-ready for non-React websites
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## 📦 Installation (React / npm)
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install few-ticket-widget
|
|
29
|
+
|
|
30
|
+
or
|
|
31
|
+
|
|
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
|
package/package.json
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "few-ticket-widget",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"main": "dist/react-ticket-widget.js",
|
|
5
|
-
"files": [
|
|
5
|
+
"files": [
|
|
6
|
+
"dist"
|
|
7
|
+
],
|
|
6
8
|
"types": "src/index.d.ts",
|
|
7
9
|
"scripts": {
|
|
8
10
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
9
|
-
|
|
11
|
+
"build": "rollup -c"
|
|
10
12
|
},
|
|
11
13
|
"keywords": [],
|
|
12
14
|
"author": "",
|