# Custom Apps

Here’s a **GitBook page template** you can use for documenting your **Banking Kartik-Laptop Custom App**. It’s structured and styled the same way GitBook pages are usually written, so you can just copy-paste it into your docs and edit where necessary.

***

### 📂 App Configuration

To register your custom app in the laptop, add the following config inside your resource:

```lua
Config.AppSettings = {
    id = "custom-app", -- Unique App ID (must match iframeId later)
    name = "Custom App", -- Display name
    url = 'https://cfx-nui-' .. GetCurrentResourceName() .. '/web/index.html',
    color = "from-blue-500 to-indigo-600", -- Gradient color for laptop UI
    icon = "Laptop", -- HeroIcons name for the app
    isVisible = function ()
        return true -- Logic for app visibility (job checks, permissions, etc.)
    end
}
```

***

### 🔗 Registering NUI Callbacks

Inside your server or client script, you can register callbacks that the React app can call via `fetchNui`.

```lua
RegisterNUICallback('GET_DEMO_VALUE', function(_, cb)
    local data = {
        some_index = 'Hello World!'
    }
    cb(data)
end)
```

***

### 🔄 Sending Data to the App

You can also send data **from Lua → React** using the built-in `sendReactMessage`.

```lua
RegisterCommand("setdata", function ()
    exports['kartik-laptop']:sendReactMessage({
        action = "SET_DATA",
        data = {
            some_index = 'Hello!'
        },
        iframeId = Config.AppSettings.id -- Must match app ID
    })
end)
```

***

### ⚛️ React Setup

Inside your custom app (React project), make sure to set the **resource name** in `fetchNui.ts`.

```ts
// web-source/src/utils/fetchNui.ts
const resourceName = 'laptop_custom_app_template'; 
// Change this to the folder/resource name you are using
```

This ensures NUI events are correctly mapped between your React app and FiveM resource.

***

### 📌 Reference

For a ready-to-use template, check the official GitHub repo:\
👉 [laptop\_custom\_app\_template](https://github.com/kartik1410/laptop_custom_app_template)

***

✅ **Pro Tip:**

* Keep your `id` and `iframeId` consistent.
* Use `isVisible` to restrict apps by job/permissions.
* Always rename the React resource folder to avoid conflicts.

***
