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 MoniteSDK instance

The MoniteSDK instance provides configuration for all Monite React UI components through the MoniteProvider wrapper.

1
import { MoniteSDK } from "@monite/sdk-api";
2
3
const monite = new MoniteSDK({
4
  apiUrl: "https://api.sandbox.monite.com/v1", // "https://api.monite.com/v1" if in Production
5
  entityId: "ENTITY_ID",
6
  fetchToken: fetchToken,
7
});

The following table shows all the MoniteSDK instance properties and their description:

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.

1
import { MoniteProvider } from "@monite/sdk-react";
2
3
return (
4
  <MoniteProvider monite={monite} locale={{ currencyLocale: "de-DE" }}>
5
    <div className="App">
6
      {...}
7
    </div>
8
  </MoniteProvider>
9
);

The following table shows all the MoniteProvider wrapper properties and their description:

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.

1
return (
2
  <Dialog open alignDialog="right">
3
    <InvoiceDetails id="INVOICE_ID" />
4
  </Dialog>
5
);