{letters}
14 |{label}
13 | 14 |{value}
16 |SAN ANDREAS
9 |DRIVER LICENSE
10 |(events: DebugEvent
[], timer = 1000): void => {
16 | if (import.meta.env.MODE === "development" && isEnvBrowser()) {
17 | for (const event of events) {
18 | setTimeout(() => {
19 | window.dispatchEvent(
20 | new MessageEvent("message", {
21 | data: {
22 | action: event.action,
23 | data: event.data,
24 | },
25 | }),
26 | );
27 | }, timer);
28 | }
29 | }
30 | };
31 |
--------------------------------------------------------------------------------
/client.lua:
--------------------------------------------------------------------------------
1 | local function SendReactMessage(action, data)
2 | SendNUIMessage({action = action, data = data})
3 | end
4 |
5 | local function toggleNuiFrame(shouldShow)
6 | SetNuiFocus(shouldShow, shouldShow)
7 | SendReactMessage('setVisible', shouldShow)
8 | end
9 |
10 | local function ShowIDCard(data)
11 | /*
12 | Data structure (table):
13 | firstName: string,
14 | lastName: string,
15 | dob: string,
16 | sex: string ('m' or 'f', not case sensitive),
17 | exp: string,
18 | cref: string,
19 | class: string,
20 | pref: string,
21 |
22 | */
23 | print(json.encode(data))
24 | toggleNuiFrame(true)
25 | SendReactMessage('openIDCard', data)
26 | end
27 | exports('ShowIDCard', ShowIDCard)
28 |
29 | RegisterNetEvent('identity:client:showIdCard')
30 | AddEventHandler('identity:client:showIdCard', ShowIDCard)
31 |
32 | RegisterNUICallback('hideFrame', function(_, cb)
33 | toggleNuiFrame(false)
34 | cb({})
35 | end)
36 |
--------------------------------------------------------------------------------
/web/src/components/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import "./App.css";
3 | import { debugData } from "../utils/debugData";
4 | import { useNuiEvent } from "../hooks/useNuiEvent";
5 | import Container from "./Container";
6 |
7 | debugData([
8 | {
9 | action: "setVisible",
10 | data: true,
11 | },
12 | ]);
13 |
14 | interface ReturnData {
15 | firstName: string;
16 | lastName: string;
17 | dob: string,
18 | sex: string,
19 | exp: string,
20 | cref: string,
21 | class: string,
22 | pref: string,
23 | }
24 |
25 | const App: React.FC = () => {
26 | const [formData, setFormData] = useState({
27 | firstName: 'JOHN',
28 | lastName: 'DOE',
29 | dob: '01/01/1990',
30 | sex: 'M',
31 | exp: '01/01/2025',
32 | cref: '123456',
33 | class: 'A',
34 | pref: 'UNKNOWN',
35 | });
36 |
37 | useNuiEvent