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:

• Pure React: There is always an entry component, depending on your architecture approach.
• Next.js: If using Next.js, then it's recommended to use the App component as described here: https://nextjs.org/docs/advanced-features/custom-app (opens in a new tab)

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: