> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# React components and wrappers

The Monite React UI Component SDK comes pre-built with React components and wrappers that can be used within React-based web applications. The following sections describe these components and their configuration:

## The `MoniteProvider` wrapper

The `MoniteProvider` is the root component that must wrap all other Monite-connected components. The wrapper provides extra configuration for all Monite components beneath it.

First, create an object with the parameters as shown:

```js
const moniteConfig = {
  apiUrl: "https://api.sandbox.monite.com/v1",
  entityId: "ENTITY_ID",
  fetchToken: fetchToken,
);

```

The following table shows all the object properties and their descriptions:

| Property     | Type       | Description                                                                                |
| :----------- | :--------- | :----------------------------------------------------------------------------------------- |
| `apiUrl`     | `string`   | The URL for the API in use.                                                                |
| `entityId`   | `string`   | The Monite entity to which the entity user belongs.                                        |
| `fetchToken` | `function` | A custom function that returns authorization tokens for authenticating subsequent requests |

Then, import and utilize in the `MoniteProvider` wrapper as shown:

```jsx
import { MoniteProvider } from "@monite/sdk-react";

function App() {
  return (
    <div className="App">
      <MoniteProvider monite={moniteConfig}>
        ...
      </MoniteProvider>
    </div>
  );
}

export default App;

```

## The `Dialog` component

The `Dialog` component is a wrapper component that wraps Monite React SDK components. The component provides configuration for all Monite SDK components under it. The Dialog component has three props—`open`, `fullScreen` and `alignDialog`—that determine the availability and alignment of its child component(s).

When the `open` prop is `true`, the React SDK component(s) beneath the `Dialog` wrapper is rendered as a modal and aligned to the center of the page by default. The `alignDialog` prop is used to align the component modal to the left or right-hand side. Alternatively, using the `fullScreen` prop renders the component in a full-screen layout.

```jsx
return (
  <Dialog open alignDialog="right">
    <InvoiceDetails id="INVOICE_ID" />
  </Dialog>
);
```

| Props         | Type                  | Description                                                                                                                                                                                           |
| :------------ | :-------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `alignDialog` | (`"left"`\|`"right"`) | This prop determines the alignment of the component. If undefined, the child component(s) of the `Dialog` wrapper is aligned to the center of the page.                                               |
| `fullScreen`  | `boolean`             | When used, the child component of the `Dialog` components are rendered as a full screen. This prop must not be used together with the `alignDialog` prop.                                             |
| `open`        | `boolean`             | This prop determines whether or not the `Dialog` wrapper's child component is rendered. If set to `false`, the `Dialog` is closed and components beneath the `Dialog` component will not be rendered. |

> **Warning**
>
> Since the `Dialog` component affects all components beneath it, we recommend bringing in the component at instances where you need to render either the [`InvoiceDetails`](./invoicedetails) or [`CounterpartDetails`](./counterpartdetails) components as modals.