React App Integration

This page describes how you can integrate your React-based App to Grid Signals.

Functions

• useGridSignals
• useGridSignalsWithExternalParams
• getInstance
• getInstanceProps
• createSession

States and Events

• Event Tracking

useGridSignals

Use this hook if your app is built from the omg app create template or is using @ombori/ga-settings.

This will initialize the Grid Signals instance using the application settings. Under the hood, it uses @ombori/ga-settings to automatically get the required Grid Signals parameters for initialization.

You can only start invoking any other functions when Grid Signals is ready.

Usage

import React from "react"
import { useGridSignals, getInstance as gs } from "@ombori/grid-signals-react"
const App = () => {
  const isReady = useGridSignals()
  if (!isReady) {
    return <div>Initializing App</div>
  }
  return <MainPage />
}

Ideally, you don't need to override the parameters when using this function. However, we provide the ability to override the Grid Signals Init Parameters for flexibility.

const isReady = useGridSignals({
  environment: 'TEST_ENV',
  ...<other valid parameters you want to override>,
});

useGridSignalsWithExternalParams

Use this hook if your app is not using @ombori/ga-settings.

This will initialize the Grid Signals instance with the required Init Parameters.

Usage

import React from "react"
import { useGridSignalsWithExternalParams } from "@ombori/grid-signals-react"

const App = () => {
  const isReady = useGridSignalsWithExternalParams({
    deviceId: "XXXXXXXXXXXXXXXXXXXXXXXX",
    installationId: "XXXXXXXXXXXXXXXXXXXXXXXX",
    spaceId: "XXXXXXXXXXXXXXXXXXXXXXXX",
    tenantId: "XXXXXXXXXXXXXXXXXXXXXXXX",
    appVersion: "XXXXXXXXXXXXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXXXXXXXXXXXXX",
    environment: "PROD",
    dataResidency: "EU",
    country: "SE",
    installationVersion: "XXXXXXXXXXXXXXXXXXXXXXXX",
    accessId: "XXXX",
    accessToken: "XXXX",
  })

  if (!isReady) {
    return <div>Initializing App</div>
  }

  return <MainPage />
}

getInstanceProps

This will return the instance object of the session. Ideally, you don't need to get the instance props. This is provided for flexibility.

Usage

import { getInstance as gs } from '@ombori/grid-signals-react';

...
  gs().getInstanceProps();
...

Returns

These are the instance properties that are returned from the getInstance() method.

createSession

Starts a new session. You should call this method every time a new user starts interacting with the application.

Usage

import { getInstance as gs } from '@ombori/grid-signals-react';

...
  gs().createSession();
...

Grid Signals Init Parameters

Event Tracking

See Event Tracking page for more details.