@encatch/ws-react 0.2.0-beta.0 → 0.2.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 +26 -24
- package/dist/EncatchPreview.d.ts +2 -2
- package/dist/types.d.ts +4 -4
- package/dist/useEncatchFormEvent.d.ts +5 -5
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -59,7 +59,9 @@ function App() {
|
|
|
59
59
|
scale={100}
|
|
60
60
|
formId="unique-form-id"
|
|
61
61
|
onFormEvent={(formEvent) => {
|
|
62
|
-
formEvent.onSubmit((
|
|
62
|
+
formEvent.onSubmit((_data) => {
|
|
63
|
+
// e.g. send submission to your backend or analytics
|
|
64
|
+
});
|
|
63
65
|
}}
|
|
64
66
|
/>
|
|
65
67
|
</div>
|
|
@@ -88,33 +90,33 @@ import { EncatchPreview } from '@encatch/ws-react';
|
|
|
88
90
|
function App() {
|
|
89
91
|
const handleFormEvents = (formEvent) => {
|
|
90
92
|
// Called when form is submitted
|
|
91
|
-
formEvent.onSubmit((
|
|
92
|
-
|
|
93
|
+
formEvent.onSubmit((_data) => {
|
|
94
|
+
// e.g. send submission to your backend or analytics
|
|
93
95
|
});
|
|
94
96
|
|
|
95
97
|
// Called when form is shown/displayed
|
|
96
|
-
formEvent.onShow((
|
|
97
|
-
|
|
98
|
+
formEvent.onShow((_data) => {
|
|
99
|
+
// e.g. track impression
|
|
98
100
|
});
|
|
99
101
|
|
|
100
102
|
// Called when form is closed
|
|
101
|
-
formEvent.onClose((
|
|
102
|
-
|
|
103
|
+
formEvent.onClose((_data) => {
|
|
104
|
+
// e.g. clear modal state
|
|
103
105
|
});
|
|
104
106
|
|
|
105
107
|
// Called when user navigates between sections
|
|
106
108
|
formEvent.onSectionChange((data) => {
|
|
107
|
-
|
|
109
|
+
// e.g. sync UI to data.sectionIndex
|
|
108
110
|
});
|
|
109
111
|
|
|
110
112
|
// Called when a question is answered
|
|
111
113
|
formEvent.onQuestionAnswered((data) => {
|
|
112
|
-
|
|
114
|
+
// e.g. partial-save or analytics
|
|
113
115
|
});
|
|
114
116
|
|
|
115
117
|
// Called when an error occurs
|
|
116
118
|
formEvent.onError((data) => {
|
|
117
|
-
|
|
119
|
+
// e.g. report data.error to your monitoring
|
|
118
120
|
});
|
|
119
121
|
};
|
|
120
122
|
|
|
@@ -140,18 +142,18 @@ import { useEncatchFormEvent } from '@encatch/ws-react';
|
|
|
140
142
|
|
|
141
143
|
function MyComponent() {
|
|
142
144
|
// Subscribe to all form submit events
|
|
143
|
-
useEncatchFormEvent('form:submit', (
|
|
144
|
-
|
|
145
|
+
useEncatchFormEvent('form:submit', (_payload) => {
|
|
146
|
+
// e.g. send payload to your backend or analytics
|
|
145
147
|
});
|
|
146
148
|
|
|
147
149
|
// Subscribe to events from a specific form instance
|
|
148
|
-
useEncatchFormEvent('form:submit', (
|
|
149
|
-
|
|
150
|
+
useEncatchFormEvent('form:submit', (_payload) => {
|
|
151
|
+
// e.g. handle submit for this formId only
|
|
150
152
|
}, { formId: 'my-form-instance-1' });
|
|
151
153
|
|
|
152
154
|
// Subscribe once (unsubscribe after first event)
|
|
153
|
-
useEncatchFormEvent('form:show', (
|
|
154
|
-
|
|
155
|
+
useEncatchFormEvent('form:show', (_payload) => {
|
|
156
|
+
// e.g. first-show side effects
|
|
155
157
|
}, { formId: 'my-form-instance-1', once: true });
|
|
156
158
|
|
|
157
159
|
return <div>Your component</div>;
|
|
@@ -176,13 +178,13 @@ import { useEncatchFormEventAll } from '@encatch/ws-react';
|
|
|
176
178
|
|
|
177
179
|
function MyComponent() {
|
|
178
180
|
// Subscribe to all events from all forms
|
|
179
|
-
useEncatchFormEventAll((
|
|
180
|
-
|
|
181
|
+
useEncatchFormEventAll((_eventType, _payload) => {
|
|
182
|
+
// e.g. route by eventType and payload
|
|
181
183
|
});
|
|
182
184
|
|
|
183
185
|
// Subscribe to all events from a specific form instance
|
|
184
|
-
useEncatchFormEventAll((
|
|
185
|
-
|
|
186
|
+
useEncatchFormEventAll((_eventType, _payload) => {
|
|
187
|
+
// e.g. instance-scoped handling
|
|
186
188
|
}, { formId: 'my-form-instance-1' });
|
|
187
189
|
|
|
188
190
|
return <div>Your component</div>;
|
|
@@ -237,12 +239,12 @@ import { EncatchPreview, useEncatchFormEvent } from '@encatch/ws-react';
|
|
|
237
239
|
|
|
238
240
|
function MultiFormApp() {
|
|
239
241
|
// Listen to specific form events
|
|
240
|
-
useEncatchFormEvent('form:submit', (
|
|
241
|
-
|
|
242
|
+
useEncatchFormEvent('form:submit', (_payload) => {
|
|
243
|
+
// e.g. survey-specific handling
|
|
242
244
|
}, { formId: 'survey-form' });
|
|
243
245
|
|
|
244
|
-
useEncatchFormEvent('form:submit', (
|
|
245
|
-
|
|
246
|
+
useEncatchFormEvent('form:submit', (_payload) => {
|
|
247
|
+
// e.g. feedback-specific handling
|
|
246
248
|
}, { formId: 'feedback-form' });
|
|
247
249
|
|
|
248
250
|
return (
|
package/dist/EncatchPreview.d.ts
CHANGED
|
@@ -18,11 +18,11 @@ interface EncatchPreviewProps {
|
|
|
18
18
|
* ```tsx
|
|
19
19
|
* const handleFormEvents = (formEvent) => {
|
|
20
20
|
* formEvent.onSubmit((data) => {
|
|
21
|
-
*
|
|
21
|
+
* // e.g. send submission to your backend or analytics
|
|
22
22
|
* });
|
|
23
23
|
*
|
|
24
24
|
* formEvent.onQuestionAnswered((data) => {
|
|
25
|
-
*
|
|
25
|
+
* // e.g. track partial responses
|
|
26
26
|
* });
|
|
27
27
|
* };
|
|
28
28
|
*
|
package/dist/types.d.ts
CHANGED
|
@@ -39,7 +39,7 @@ export interface EncatchFormConfig {
|
|
|
39
39
|
featureSettings?: {
|
|
40
40
|
closeButton?: boolean;
|
|
41
41
|
shareableMode?: string;
|
|
42
|
-
/**
|
|
42
|
+
/** Custom CSS to apply — either a URL ending in .css (loaded via <link>) or raw CSS text (injected via <style>). */
|
|
43
43
|
customCss?: string;
|
|
44
44
|
};
|
|
45
45
|
};
|
|
@@ -88,15 +88,15 @@ export type OnErrorCallback = (payload: FormEventPayload['form:error']) => void;
|
|
|
88
88
|
* ```tsx
|
|
89
89
|
* const handleFormEvents = (formEvent) => {
|
|
90
90
|
* formEvent.onSubmit((data) => {
|
|
91
|
-
*
|
|
91
|
+
* // e.g. send submission to your backend or analytics
|
|
92
92
|
* });
|
|
93
93
|
*
|
|
94
94
|
* formEvent.onQuestionAnswered((data) => {
|
|
95
|
-
*
|
|
95
|
+
* // e.g. track partial responses
|
|
96
96
|
* });
|
|
97
97
|
*
|
|
98
98
|
* formEvent.onSectionChange((data) => {
|
|
99
|
-
*
|
|
99
|
+
* // e.g. sync UI to data.sectionIndex
|
|
100
100
|
* });
|
|
101
101
|
* };
|
|
102
102
|
*
|
|
@@ -6,17 +6,17 @@ import { type FormEventType, type FormEventPayload, type SubscriptionOptions } f
|
|
|
6
6
|
* ```tsx
|
|
7
7
|
* // Subscribe to all form submit events
|
|
8
8
|
* useEncatchFormEvent('form:submit', (payload) => {
|
|
9
|
-
*
|
|
9
|
+
* // e.g. send payload to your backend or analytics
|
|
10
10
|
* });
|
|
11
11
|
*
|
|
12
12
|
* // Subscribe to events from a specific form instance
|
|
13
13
|
* useEncatchFormEvent('form:submit', (payload) => {
|
|
14
|
-
*
|
|
14
|
+
* // e.g. handle submit for this formId only
|
|
15
15
|
* }, { formId: 'my-form-instance-1' });
|
|
16
16
|
*
|
|
17
17
|
* // Subscribe once
|
|
18
18
|
* useEncatchFormEvent('form:show', (payload) => {
|
|
19
|
-
*
|
|
19
|
+
* // e.g. first-show side effects
|
|
20
20
|
* }, { formId: 'my-form-instance-1', once: true });
|
|
21
21
|
* ```
|
|
22
22
|
*
|
|
@@ -33,12 +33,12 @@ export declare function useEncatchFormEvent<T extends FormEventType>(eventType:
|
|
|
33
33
|
* ```tsx
|
|
34
34
|
* // Subscribe to all events from all forms
|
|
35
35
|
* useEncatchFormEventAll((eventType, payload) => {
|
|
36
|
-
*
|
|
36
|
+
* // e.g. route by eventType and payload
|
|
37
37
|
* });
|
|
38
38
|
*
|
|
39
39
|
* // Subscribe to all events from a specific form instance
|
|
40
40
|
* useEncatchFormEventAll((eventType, payload) => {
|
|
41
|
-
*
|
|
41
|
+
* // e.g. instance-scoped logging or state updates
|
|
42
42
|
* }, { formId: 'my-form-instance-1' });
|
|
43
43
|
* ```
|
|
44
44
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@encatch/ws-react",
|
|
3
|
-
"version": "0.2.0
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.umd.js",
|
|
6
6
|
"module": "./dist/index.es.js",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"react-dom": "^19.1.1"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@encatch/schema": "1.1.
|
|
24
|
-
"@encatch/event-publisher": "1.0.
|
|
23
|
+
"@encatch/schema": "1.1.1",
|
|
24
|
+
"@encatch/event-publisher": "1.0.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@eslint/js": "^9.36.0",
|