@omnizoek/react 0.1.0 → 0.1.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 +362 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,362 @@
|
|
|
1
|
+
# @omnizoek/react
|
|
2
|
+
|
|
3
|
+
React hooks for the [OmniZoek API](https://omnizoek.nl) — Dutch government data (addresses, IBAN, VAT, energy labels, vehicles and more) in one clean set of SWR-backed hooks.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@omnizoek/react)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- **10 ready-made hooks** — one per endpoint, typed in and out
|
|
13
|
+
- **SWR-powered** — automatic caching, deduplication, and background revalidation
|
|
14
|
+
- **Skip requests cleanly** — pass `null` as params to suspend a hook without conditionals
|
|
15
|
+
- **`enabled` flag** — opt-out of fetching without unmounting the hook
|
|
16
|
+
- **`refetch()`** — trigger manual revalidation from anywhere
|
|
17
|
+
- **Full TypeScript support** — every hook is fully typed via `@omnizoek/sdk`
|
|
18
|
+
- **ESM + CJS dual output** — works in Next.js, Vite, Remix, and plain CRA
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @omnizoek/react @omnizoek/sdk swr
|
|
26
|
+
# or
|
|
27
|
+
pnpm add @omnizoek/react @omnizoek/sdk swr
|
|
28
|
+
# or
|
|
29
|
+
yarn add @omnizoek/react @omnizoek/sdk swr
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
> `@omnizoek/sdk`, `react ≥ 17`, and `swr ≥ 2` are **peer dependencies** — install them alongside this package.
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## Quick start
|
|
37
|
+
|
|
38
|
+
### 1. Wrap your app with `<OmniProvider>`
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { OmniProvider } from "@omnizoek/react";
|
|
42
|
+
|
|
43
|
+
function App() {
|
|
44
|
+
return (
|
|
45
|
+
<OmniProvider apiKey="omni_test_…">
|
|
46
|
+
<MyPage />
|
|
47
|
+
</OmniProvider>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### 2. Use any hook inside the tree
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import { useAddressEnrich } from "@omnizoek/react";
|
|
56
|
+
|
|
57
|
+
function AddressCard({ postcode, houseNumber }) {
|
|
58
|
+
const { data, loading, error } = useAddressEnrich(
|
|
59
|
+
postcode && houseNumber ? { postcode, houseNumber } : null
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
if (loading) return <p>Laden…</p>;
|
|
63
|
+
if (error) return <p>Fout: {error.message}</p>;
|
|
64
|
+
if (!data) return null;
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<p>
|
|
68
|
+
{data.street} {data.house_number}, {data.city}
|
|
69
|
+
</p>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## Next.js App Router example
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
// app/layout.tsx
|
|
80
|
+
"use client";
|
|
81
|
+
|
|
82
|
+
import { OmniProvider } from "@omnizoek/react";
|
|
83
|
+
|
|
84
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
85
|
+
return (
|
|
86
|
+
<html lang="nl">
|
|
87
|
+
<body>
|
|
88
|
+
<OmniProvider apiKey={process.env.NEXT_PUBLIC_OMNI_API_KEY!}>
|
|
89
|
+
{children}
|
|
90
|
+
</OmniProvider>
|
|
91
|
+
</body>
|
|
92
|
+
</html>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## API key
|
|
100
|
+
|
|
101
|
+
Get a free **sandbox key** instantly — no sign-up required:
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
curl -X POST https://api.omnizoek.nl/v1/keys/test
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Or visit [omnizoek.nl/playground](https://omnizoek.nl/playground) to try every endpoint live.
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
## Hooks reference
|
|
112
|
+
|
|
113
|
+
All hooks return an [`OmniHookResult<T>`](#omniHookResult) object.
|
|
114
|
+
Pass `null` (or `undefined`) as `params` to skip the request without a conditional hook call.
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
### `useAddressEnrich` — Geographic enrichment
|
|
119
|
+
|
|
120
|
+
Enriches a Dutch address via the BAG (postcode + house number → street, city, coordinates, energy label).
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
import { useAddressEnrich } from "@omnizoek/react";
|
|
124
|
+
|
|
125
|
+
const { data, loading, error } = useAddressEnrich(
|
|
126
|
+
postcode ? { postcode, houseNumber } : null
|
|
127
|
+
);
|
|
128
|
+
|
|
129
|
+
// data.street, data.city, data.lat, data.lon, data.energy_label, …
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
---
|
|
133
|
+
|
|
134
|
+
### `useIbanToBic` — IBAN → BIC lookup
|
|
135
|
+
|
|
136
|
+
Resolves a Dutch or EU IBAN to its BIC/SWIFT code and bank name.
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
import { useIbanToBic } from "@omnizoek/react";
|
|
140
|
+
|
|
141
|
+
const { data } = useIbanToBic({ iban: "NL91ABNA0417164300" });
|
|
142
|
+
|
|
143
|
+
// data.bic, data.bank_name, data.country_code
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
### `useVatVerify` — EU VAT verification
|
|
149
|
+
|
|
150
|
+
Checks a VAT number via the EU VIES service.
|
|
151
|
+
|
|
152
|
+
```tsx
|
|
153
|
+
import { useVatVerify } from "@omnizoek/react";
|
|
154
|
+
|
|
155
|
+
const { data } = useVatVerify({ countryCode: "NL", vatNumber: "123456782B01" });
|
|
156
|
+
|
|
157
|
+
// data.valid, data.company_name, data.address, data.checked_at
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
### `useValidateFinance` — BSN / IBAN checksum validation
|
|
163
|
+
|
|
164
|
+
Validates the checksum of a BSN (11-proef) or IBAN (MOD-97).
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
import { useValidateFinance } from "@omnizoek/react";
|
|
168
|
+
|
|
169
|
+
const { data } = useValidateFinance({ type: "bsn", number: "123456782" });
|
|
170
|
+
|
|
171
|
+
// data.valid, data.type, data.algorithm, data.detail
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
### `useMinimumWage` — Statutory minimum wage (WML)
|
|
177
|
+
|
|
178
|
+
Returns the applicable gross hourly, daily and monthly minimum wage for a given age and date.
|
|
179
|
+
|
|
180
|
+
```tsx
|
|
181
|
+
import { useMinimumWage } from "@omnizoek/react";
|
|
182
|
+
|
|
183
|
+
const { data } = useMinimumWage({ age: 21, date: "2025-01-01" });
|
|
184
|
+
|
|
185
|
+
// data.hourly_eur, data.daily_eur, data.monthly_eur, data.law_reference
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
---
|
|
189
|
+
|
|
190
|
+
### `useHolidaySurcharge` — Holiday surcharge calculator
|
|
191
|
+
|
|
192
|
+
Returns whether a date is a public holiday and the applicable surcharge multiplier for a given industry.
|
|
193
|
+
|
|
194
|
+
```tsx
|
|
195
|
+
import { useHolidaySurcharge } from "@omnizoek/react";
|
|
196
|
+
|
|
197
|
+
const { data } = useHolidaySurcharge({ date: "2025-12-25", industry: "retail" });
|
|
198
|
+
|
|
199
|
+
// data.is_holiday, data.holiday_name, data.surcharge_multiplier
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
### `useEnergyLabel` — EP-Online energy label
|
|
205
|
+
|
|
206
|
+
Looks up the registered energy label for a Dutch address.
|
|
207
|
+
|
|
208
|
+
```tsx
|
|
209
|
+
import { useEnergyLabel } from "@omnizoek/react";
|
|
210
|
+
|
|
211
|
+
const { data } = useEnergyLabel({ postcode: "1012LG", houseNumber: "1" });
|
|
212
|
+
|
|
213
|
+
// data.energy_label, data.label_class, data.registered_at, data.valid_until
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
---
|
|
217
|
+
|
|
218
|
+
### `useEmissionZone` — Zero-emission zone check
|
|
219
|
+
|
|
220
|
+
Checks whether a vehicle (by licence plate) is allowed in Dutch zero-emission zones.
|
|
221
|
+
|
|
222
|
+
```tsx
|
|
223
|
+
import { useEmissionZone } from "@omnizoek/react";
|
|
224
|
+
|
|
225
|
+
const { data } = useEmissionZone({ kenteken: "AB123C" });
|
|
226
|
+
|
|
227
|
+
// data.ze_compliant, data.fuel_types, data.euro_standard, data.zones_checked
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
---
|
|
231
|
+
|
|
232
|
+
### `useTransitDisruptions` — NS train disruptions
|
|
233
|
+
|
|
234
|
+
Returns active and planned train disruptions for a given NS station code.
|
|
235
|
+
|
|
236
|
+
```tsx
|
|
237
|
+
import { useTransitDisruptions } from "@omnizoek/react";
|
|
238
|
+
|
|
239
|
+
const { data } = useTransitDisruptions({ stationCode: "ASD" });
|
|
240
|
+
|
|
241
|
+
// data.disruptions: [{ type, title, cause, start, end }]
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
---
|
|
245
|
+
|
|
246
|
+
### `useGridTrigger` — ENTSO-E electricity price trigger
|
|
247
|
+
|
|
248
|
+
Returns the current day-ahead electricity price and whether it is negative (a grid overload trigger).
|
|
249
|
+
|
|
250
|
+
```tsx
|
|
251
|
+
import { useGridTrigger } from "@omnizoek/react";
|
|
252
|
+
|
|
253
|
+
const { data } = useGridTrigger(); // no params required
|
|
254
|
+
|
|
255
|
+
if (data?.trigger) {
|
|
256
|
+
// ⚡ Negative price — good time for high-consumption processes
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
// data.negative_price, data.current_price_eur_mwh, data.period_start
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
---
|
|
263
|
+
|
|
264
|
+
## `OmniHookResult<T>`
|
|
265
|
+
|
|
266
|
+
Every hook returns this shape:
|
|
267
|
+
|
|
268
|
+
```ts
|
|
269
|
+
interface OmniHookResult<T> {
|
|
270
|
+
/** Response data, or `undefined` while loading or on error */
|
|
271
|
+
data: T | undefined;
|
|
272
|
+
/** `true` on the initial load (no cached data yet) */
|
|
273
|
+
loading: boolean;
|
|
274
|
+
/** `true` whenever a background revalidation is in flight */
|
|
275
|
+
validating: boolean;
|
|
276
|
+
/** Typed error from the SDK, or `null` */
|
|
277
|
+
error: Error | null;
|
|
278
|
+
/** Manually trigger a refetch / revalidation */
|
|
279
|
+
refetch: () => Promise<T | undefined>;
|
|
280
|
+
}
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
---
|
|
284
|
+
|
|
285
|
+
## Hook options
|
|
286
|
+
|
|
287
|
+
All hooks accept an optional second argument:
|
|
288
|
+
|
|
289
|
+
```ts
|
|
290
|
+
interface UseOmniQueryOptions {
|
|
291
|
+
/**
|
|
292
|
+
* Set to `false` to skip the request without passing `null` as params.
|
|
293
|
+
* @default true
|
|
294
|
+
*/
|
|
295
|
+
enabled?: boolean;
|
|
296
|
+
}
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
Example — skip fetching until a checkbox is checked:
|
|
300
|
+
|
|
301
|
+
```tsx
|
|
302
|
+
const { data } = useEnergyLabel(
|
|
303
|
+
{ postcode, houseNumber },
|
|
304
|
+
{ enabled: showEnergyLabel }
|
|
305
|
+
);
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
---
|
|
309
|
+
|
|
310
|
+
## Error handling
|
|
311
|
+
|
|
312
|
+
All SDK errors extend `OmniError` and are available from `@omnizoek/sdk`:
|
|
313
|
+
|
|
314
|
+
```tsx
|
|
315
|
+
import {
|
|
316
|
+
OmniAuthError,
|
|
317
|
+
OmniNotFoundError,
|
|
318
|
+
OmniRateLimitError,
|
|
319
|
+
} from "@omnizoek/sdk";
|
|
320
|
+
|
|
321
|
+
const { error } = useAddressEnrich({ postcode: "0000XX", houseNumber: "0" });
|
|
322
|
+
|
|
323
|
+
if (error instanceof OmniAuthError) { /* invalid API key */ }
|
|
324
|
+
if (error instanceof OmniNotFoundError) { /* address not found */ }
|
|
325
|
+
if (error instanceof OmniRateLimitError) { /* rate limited */ }
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
---
|
|
329
|
+
|
|
330
|
+
## `OmniProvider` props
|
|
331
|
+
|
|
332
|
+
| Prop | Type | Required | Description |
|
|
333
|
+
|---|---|---|---|
|
|
334
|
+
| `apiKey` | `string` | ✅ | Your OmniZoek API key (`omni_live_…` or `omni_test_…`) |
|
|
335
|
+
| `baseUrl` | `string` | — | Override the API base URL (useful for local mocks) |
|
|
336
|
+
| `options` | `OmniClientOptions` | — | Additional options forwarded to `OmniClient` (retries, timeout, …) |
|
|
337
|
+
| `children` | `ReactNode` | ✅ | Component subtree that can use OmniZoek hooks |
|
|
338
|
+
|
|
339
|
+
The underlying `OmniClient` is memoized and only recreated when `apiKey` or `baseUrl` changes.
|
|
340
|
+
|
|
341
|
+
---
|
|
342
|
+
|
|
343
|
+
## Requirements
|
|
344
|
+
|
|
345
|
+
- **React ≥ 17**
|
|
346
|
+
- **SWR ≥ 2**
|
|
347
|
+
- **`@omnizoek/sdk` ≥ 0.1.1**
|
|
348
|
+
- **Node.js ≥ 18** (for SSR / server components)
|
|
349
|
+
|
|
350
|
+
---
|
|
351
|
+
|
|
352
|
+
## Related packages
|
|
353
|
+
|
|
354
|
+
| Package | Description |
|
|
355
|
+
|---|---|
|
|
356
|
+
| [`@omnizoek/sdk`](https://www.npmjs.com/package/@omnizoek/sdk) | Framework-agnostic TypeScript SDK |
|
|
357
|
+
|
|
358
|
+
---
|
|
359
|
+
|
|
360
|
+
## License
|
|
361
|
+
|
|
362
|
+
MIT — see [LICENSE](LICENSE).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omnizoek/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "React hooks for the OmniZoek API — address enrichment, IBAN, vehicle, energy labels and more.",
|
|
5
5
|
"author": "OmniZoek <support@omnizoek.nl>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"swr": ">=2"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@omnizoek/sdk": "^0.1.
|
|
50
|
+
"@omnizoek/sdk": "^0.1.2",
|
|
51
51
|
"@types/react": "^18.0.0",
|
|
52
52
|
"react": "^18.0.0",
|
|
53
53
|
"swr": "^2.2.0",
|