# React Settings Page

**URL:** <https://community.homey.app/t/react-settings-page/79478>\
**Category:** Developers\
**Created:** [April 19, 2023, 8:24am UTC](https://community.homey.app/t/react-settings-page/79478 "2023-04-19T08:24:15Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![spkesDE](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/spkesde/32/54352_2.png) [@spkesDE](https://community.homey.app/u/spkesDE)\
**Post date:** [April 19, 2023, 8:24am UTC](https://community.homey.app/t/react-settings-page/79478/1 "2023-04-19T08:24:15Z")

</div>

Hi everyone,

I wanted to share a project I’ve been working on, a React settings page. It allows to use all the `homey` functions inside the React app. I used TypeScript since I prefer it over JS but you can also use JS.  
Also, I used class components instead of the more modern functional components, but this is purely personal preference.

You need 3 files to make it work.

[`public/index.html`](https://github.com/spkesDE/com.spkes.telegramNotifications/blob/master/telegram-settings/public/index.html)

```auto
<!DOCTYPE html>
<html lang="en" style="padding: 0 !important;">
<head>
    <meta charset="utf-8"/>
    <script data-origin="settings" src="/homey.js" type="text/javascript"></script>
    <script type="text/javascript">
      function onHomeyReady(Homey) {
        window.Homey = Homey;
        Homey.ready();
        window.HomeyReady = true;
      }
    </script>
</head>
<body style="padding: 0 !important; min-height: auto !important;">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

```

The `index.html` binds the `Homey` object to the `window` object. Homey can be used inside React using the `window` scope. The `body` style is optional, it makes the app full size so it looks better.  
For development, you can include the `homey.css` in this` index.html` file.  
` <link href="https://<cloud-id>.connect.athom.com/manager/webserver/assets/css/homey.css" rel="stylesheet">`

[`global.d.ts`](https://github.com/spkesDE/com.spkes.telegramNotifications/blob/master/telegram-settings/src/global.d.ts)

```auto
import {HomeyAPI} from './Homey';

declare global {
    interface Window {
        Homey: HomeyAPI;
        HomeyReady: boolean;
    }
}

export const Homey: HomeyAPI = window.Homey;

```

This makes the `window.Homey` object available in the typescript scope.

[`Homey.ts`](https://github.com/spkesDE/com.spkes.telegramNotifications/blob/master/telegram-settings/src/Homey.ts)

```auto
export interface HomeyAPI {
    __(key: string, tokens?: Object): string;

    ready(callback?: () => void): void;

    alert(message: string, callback?: () => void): void;

    confirm(eventName: string, listener: HomeyEventListener): Promise<any>;

    popup(url: string): void;

    trigger(eventName: string, data?: Record<string, any>): Promise<any>;

    get(key: string, callback?: (value: any) => void): Promise<any>;

    set(key: string, value: any, callback?: (err: any) => void): Promise<any>;

    unset(key: string, callback?: (value: any) => void): Promise<any>;

    api(key: string, path: string, body: any, callback?: () => void): Promise<any>;
}

export default class Homey {
    public static __(key: string, tokens?: Object) {
        if (window.HomeyReady)
            return window.Homey.__(key, tokens) ?? key;
        else return key;
    }

    public static set(key: string, value: any, callback?: (value: any) => void) {
        if (window.HomeyReady) return window.Homey.set(key, value, callback);
    }

    public static unset(key: string, callback?: (value: any) => void) {
        if (window.HomeyReady)
            return window.Homey.unset(key, callback);
    }

    public static get(key: string, callback?: (value: any) => void) {
        if (window.HomeyReady) return window.Homey.get(key, callback);
    }

    public static api(key: string, path: string, body: any, callback?: () => void) {
        if (window.HomeyReady) return window.Homey.api(key, path, body, callback);
    }

    public static alert(message: string, callback?: () => void) {
        if (window.HomeyReady) return window.Homey.alert(message, callback);
    }

    public static confirm(message: string, callback: HomeyEventListener) {
        if (window.HomeyReady) return window.Homey.confirm(message, callback);
    }

    public static popup(url: string) {
        if (window.HomeyReady) return window.Homey.popup(url);
    }

    public static trigger(eventName: string, callback?: (err: any) => void) {
        if (window.HomeyReady) return window.Homey.trigger(eventName, callback);
    }
}

export interface HomeyEvent {
    name: string;
    data?: Record<string, unknown>;
}

export interface HomeyEventListener {
    (event: HomeyEvent): void;
}

```

For the full project, take a look [here](https://github.com/spkesDE/com.spkes.telegramNotifications/tree/master/telegram-settings).  
Also, I would recommend making a check to see if “window.HomeyReady” is true before displaying any data. Like [here](https://github.com/spkesDE/com.spkes.telegramNotifications/blob/master/telegram-settings/src/App.tsx#L32).

You can use all the Homey function calling the static Homey file. e.g.` Homey.set('myVar', true, (err) => console.log('hello world'));` [This is how](https://github.com/spkesDE/com.spkes.telegramNotifications/blob/master/telegram-settings/src/components/MainMenu/StatusWidget.tsx#L51) I used it to get the data when it was needed.

If you have any questions, let me know.

Best regards ✌