@financial-times/dotcom-ui-app-context

This package provides methods for embedding [app tracking context data] into your server-side rendered pages and safely retrieving it again in the browser.

[app tracking context data]: ../dotcom-server-app-context/schema.md

This package is _only_ for tracking context data. Any data you embed using it will be sent with clientside Spoor tracking events. If you want to share generic application-specific data with the client, consider using @financial-times/dotcom-ui-data-embed.

Getting started

This package is compatible with Node 12+ and is distributed on npm.

``sh
npm install --save @financial-times/dotcom-ui-app-context
`

After installing the package you can use it to embed app-context data into your pages on the server-side. This data can then be retrieved and used in your client-side code.

$3

If you are using React to render your app you can use the AppContextEmbed component to integrate the app context data with your pages:

`jsx
import { AppContextEmbed } from '@financial-times/dotcom-ui-app-context'
const appContext = { appName: 'app-name', contextProperty: 'my-property' }

export default (props) => (






...



)
`

Otherwise you can insert a JSON formatted string into a


}
`

$3

Once you are delivering the [app context data] with your pages you can use the app context client in your client-side code. The client provides methods for safely retrieving the status of individual context properties.

`js
import * as appContext from '@financial-times/dotcom-ui-app-context'

const appContext = appContext.init()

if (appContext.get('my-context-property')) {
...
}
`

Client-side API

$3

Initialises and returns a new app context client which can be used to safely access the status of individual contexts.

App context client API

$3

Returns the value of the requested property. If the property is not found this will return undefined`.

$3

Returns all app context data.

_Please note_ that the [app context data] object is frozen so it cannot be modified.