You can refer to the Cobalt’s GitHub repo for the React SDK here.

​
Install

First, install @cobaltio/react-cobalt-js and @cobaltio/cobalt-js via the terminal.

npm install --save @cobaltio/react-cobalt-js @cobaltio/cobalt-js

​
Initialise

Import Provider & Config

import { Provider, Config } from "@cobaltio/react-cobalt-js";

​
Render Cobalt Connect

Perform the on click action to render the react component of cobalt connect

  • Config component needs to be wrapped inside the Provider component.
  • Pass the Cobalt session token (that you generated using the Cobalt backend SDK) to the provider.
<Provider sessionToken={ cobaltToken }>
    {
        // ideally you'd render the Config component inside a modal.
        // the component only gets rendered when `slug` is passed.
        <Config
            id="SOME_UNIQUE_CONFIG_ID" // Optional
            slug="APP_SLUG" // application type / slug
            // dynamic labels payload (optional)
            labels={{ /* PAYLOAD */ }}
            // you can override the component's container style if you want
            style={{
                borderRadius: 8,
                maxWidth: 450,
            }}
        />
    }
</Provider>

​
Example

For an example implementation, you can check out the App.js file in the example directory.

You can refer to the Cobalt’s GitHub repo for the React SDK here.

​
Install

First, install @cobaltio/react-cobalt-js and @cobaltio/cobalt-js via the terminal.

npm install --save @cobaltio/react-cobalt-js @cobaltio/cobalt-js

​
Initialise

Import Provider & Config

import { Provider, Config } from "@cobaltio/react-cobalt-js";

​
Render Cobalt Connect

Perform the on click action to render the react component of cobalt connect

  • Config component needs to be wrapped inside the Provider component.
  • Pass the Cobalt session token (that you generated using the Cobalt backend SDK) to the provider.
<Provider sessionToken={ cobaltToken }>
    {
        // ideally you'd render the Config component inside a modal.
        // the component only gets rendered when `slug` is passed.
        <Config
            id="SOME_UNIQUE_CONFIG_ID" // Optional
            slug="APP_SLUG" // application type / slug
            // dynamic labels payload (optional)
            labels={{ /* PAYLOAD */ }}
            // you can override the component's container style if you want
            style={{
                borderRadius: 8,
                maxWidth: 450,
            }}
        />
    }
</Provider>

​
Example

For an example implementation, you can check out the App.js file in the example directory.