Development Guides
ROQ provider

ROQ Provider

Introduction

To use ROQ's UI Components, you need to wrap your React application into the <RoqProvider/> component. This provider is used for configuration and provides the required context to the other components.

You can install the UI library via NPM:

npm install @roq/ui-react

First, you need to determine the right place to add the wrapper:

Then you need to import the index.css, which holds the styling of ROQ’s UI components, and wrap your application into the <RoqProvider />

import {RoqProvider} from "@roq/ui-react";
import {getUserToken} from "<..yourlib/auth>";
import "@roq/ui-react/dist/index.css";
 
function App() {
    const token = getUserToken();
 
    return (
        <RoqProvider
            config={{
                host: "https://...",
                token,
            }}
        >
            ...
        </RoqProvider>
    );
}

There are multiple props and configuration parameters that can be set on the RoqProvider component:

PropTypeDescription
debugbooleanAttribute to launch RoqProvider in the debug mode. Lifecycle events and the configuration values will be logged into the browser console.
configobjectAn object that sets the global config with the parameters explained below.
config:hoststringDefines the URL of ROQ Platform. You can get this information from the console. Please note the hostname will be different for production and non-production environments.
config:tokenstringUser's token that enables the interaction with ROQ Platform.
config:socket?booleanA boolean value must be true if a socket connection is established. This is required for notifications and chats. (default: false)
locale?stringThe locale prop is used to translate the component. Setting the same locale used in the current user's session is recommended.
theme?stringCurrently selected theme. All components ship with a light and a dark theme (default: light)
customTheme?stringYou can change the styling of the component by injection as a custom theme like this:
config:translationsTTL?numberFetched translations are saved in the browser's local storage. This parameter lets you define the TTL in ms (default: 90000 ~ 15 minutes).
config:translationsCache?booleanBoolean value to disable the translation cache (default: true)
translate?functionCustom translation function. You can read more about customizing translations here: Custom translations
onError?functionThe callback function, which is called when an error happens.
onTokenExpired?functionThe callback function, which is called when the session has expired.