@cartbot/plate-search 3.1.2 → 3.1.3
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 +34 -1
- package/build/dist/js/plate-search.js +12 -12
- package/dist/js/plate-search.es.js +746 -722
- package/dist/js/plate-search.js +12 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,7 +49,9 @@ You can customize the "Show Products" button label:
|
|
|
49
49
|
|
|
50
50
|
### Controlled Modal State
|
|
51
51
|
|
|
52
|
-
Control the modal open/close state from your own UI
|
|
52
|
+
Control the modal open/close state from your own UI using either **controlled props** or **imperative methods**:
|
|
53
|
+
|
|
54
|
+
**Option 1: Controlled Props (Recommended)**
|
|
53
55
|
|
|
54
56
|
```jsx
|
|
55
57
|
import { useState } from "react";
|
|
@@ -74,6 +76,37 @@ function App() {
|
|
|
74
76
|
}
|
|
75
77
|
```
|
|
76
78
|
|
|
79
|
+
**Option 2: Imperative Methods (via ref)**
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
import { useRef } from "react";
|
|
83
|
+
import PlateSearch from "@cartbot/plate-search";
|
|
84
|
+
|
|
85
|
+
function App() {
|
|
86
|
+
const plateSearchRef = useRef();
|
|
87
|
+
|
|
88
|
+
return (
|
|
89
|
+
<>
|
|
90
|
+
<button onClick={() => plateSearchRef.current?.open()}>
|
|
91
|
+
Search by Registration
|
|
92
|
+
</button>
|
|
93
|
+
|
|
94
|
+
<PlateSearch
|
|
95
|
+
ref={plateSearchRef}
|
|
96
|
+
apiKey="YOUR_API_KEY"
|
|
97
|
+
hideDefaultButton
|
|
98
|
+
onModalClose={() => console.log("Modal closed")}
|
|
99
|
+
/>
|
|
100
|
+
</>
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Available methods:
|
|
105
|
+
// plateSearchRef.current.open() - Open the modal
|
|
106
|
+
// plateSearchRef.current.close() - Close the modal
|
|
107
|
+
// plateSearchRef.current.toggle() - Toggle modal state
|
|
108
|
+
```
|
|
109
|
+
|
|
77
110
|
### Auto-Close on Vehicle Selection
|
|
78
111
|
|
|
79
112
|
By default, the component shows a confirmation/summary page after vehicle selection. To auto-close the modal immediately after selection:
|