> ## Documentation Index
> Fetch the complete documentation index at: https://docs.refold.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK

<Tip>
  You can refer to the Refold's GitHub repo for the React SDK [here](https://github.com/gocobalt/react-cobalt-js).
</Tip>

#### Install

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

```bash theme={null}
npm install --save @cobaltio/react-cobalt-js @cobaltio/cobalt-js@^8
```

#### Initialise

Import `Provider` & `Config`

```bash theme={null}
import { Provider, Config } from "@cobaltio/react-cobalt-js";
```

#### Render Hosted Portal

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 Refold session token (that you generated using the Refold backend SDK) to the provider.

```JavaScript theme={null}
<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](https://github.com/gocobalt/react-cobalt-js/blob/main/example/src/App.js) file in the [example](https://github.com/gocobalt/react-cobalt-js/blob/main/example) directory.