React SDK overview
Learn about Monite's React UI Components
Overview
Monite's React SDK is a library of ready-to-use React components that are connected to the Monite API. These components can render and operate with data served by the API, such as payables, counterparts, and others. Monite partners can use UI Components to build React-based web applications for their client SMEs, powered by the Monite API.

A preview of the CounterpartsTable
component
Supported browsers
Monite UI Components support the five latest versions of major browsers: Chrome, Firefox, Safari, Edge, Opera.
React SDK components responsiveness
As of this release, the Monite React SDK is optimized for desktop use and may not provide the desired responsiveness on mobile and tablet views. We are actively working to enhance support for these platforms in future updates.
Installation
The Monite React SDK package is available on the NPM and Yarn directories. To install:
npm install @monite/sdk-react
yarn add @monite/sdk-react
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
MoniteSDK
instanceThe MoniteSDK
instance provides configuration for all Monite React UI components through the MoniteProvider
wrapper.
const monite = new MoniteSDK({
apiUrl: 'https://api.sandbox.monite.com/v1', // '<https://api.monite.com/v1>' if in Production
entityId: 'ENTITY_ID',
fetchToken: fetchToken
});
The following table shows all the MoniteSDK
instance properties and their description:
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 |
The MoniteProvider
wrapper
MoniteProvider
wrapperThe MoniteProvider
is the root component that must wrap all other Monite-connected components. The wrapper provides extra configuration for all Monite components beneath it.
return (
<MoniteProvider monite={monite} locale={{ currencyLocale: "de-DE" }}>
<div className="App">
...
</div>
</MoniteProvider>
);
The following table shows all the MoniteProvider
wrapper properties and their description:
Props | Type | Description |
---|---|---|
monite | object | This accepts the object configuration for the MoniteSDK instance defined. |
locale | object | This is a configuration object that handles the localization mechanism for the UI components. With this, you can customize translations, currency formatting and usage of delimiters and decimal separators. For more information, see Localization. |
The Dialog
component
Dialog
componentThe 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.
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. |
Since the
Dialog
component affects all components beneath it, we recommend bringing in the component at instances where you need to render either theInvoiceDetails
orCounterpartDetails
components as modals.
Usage
The example below displays a list of an entity's counterparts. The MoniteProvider
element serves as a wrapper for other Monite-connected components. Any other components imported from @team-monite/ui-widgets-react
must be placed inside this element.
Get the credentials
Before using components from the React SDK, complete the Getting started guide to set up your partner account and get API the credentials.
We also assume you have already mapped out your customers and their users as entities and entity users in Monite, and that you have the ability to:
- look up the Monite entity user ID for the user who is logged in to your application;
- look up the Monite entity ID to which the user belongs.
When an entity user logs in to your application, look up the entity ID and user ID for that user, and call Monite's POST /auth/token
endpoint to generate a Monite access token for that user.
Once you have a user access token and an entity ID, you can initialize the Monite client and components, as shown below.
Install the packages
npm install @monite/sdk-react
yarn add @monite/sdk-react
Import the packages
You need to import MoniteSDK
, MoniteProvider
, and any other components that you want to use (such as CounterpartsTable
):
import { MoniteSDK } from '@monite/sdk-api';
import {
MoniteProvider,
CounterpartsTable,
} from '@monite/sdk-react';
Create the fetchToken
function
fetchToken
functionThe fetchToken
function is used to get authorization tokens. You can create it at the backend side, but for illustration let's do that at frontend:
const fetchToken = async () => {
const response = await fetch('https://api.sandbox.monite.com/v1/auth/token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-monite-version': '2023-06-04'
},
// TODO: Replace the following fields with your Monite credentials
body: JSON.stringify({
grant_type: 'entity_user',
client_id: 'SECRET_CLIENT_ID',
client_secret: 'SECRET_CLIENT_SECRET',
entity_user_id: 'SECRET_ENTITY_USER_ID'
})
});
return response.json();
}
Create a MoniteSDK
instance
MoniteSDK
instanceconst monite = new MoniteSDK({
apiUrl: 'https://api.sandbox.monite.com/v1', // Or 'https://api.monite.com/v1' to use Production
entityId: 'ENTITY_ID', // Monite entity to which the user belongs
/** Entity whose data you want to access */
fetchToken: fetchToken
});
Embed MoniteProvider
MoniteProvider
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.
return (
<MoniteProvider
monite={monite}
locale={{
code: "en-US", // default: de-DE
}}
>
...
</MoniteProvider>
);
The locale
prop is an optional configuration object that handles the localization mechanism for the UI components. With this, you can customize translations, currency formatting and usage of delimiters and decimal separators. For more information, see Localization.
Add components
In this example, we use the CounterpartsTable
component to display a list of an entity's counterparts:
<MoniteProvider monite={monite} locale={{ code: "en-US" }}>
<CounterpartsTable />
</MoniteProvider>
Review the result
If you followed this tutorial, your code should look like this:
import { MoniteSDK } from '@monite/sdk-api';
import {
MoniteProvider,
CounterpartsTable,
} from '@monite/sdk-react';
// Define a function that retrieves access tokens
const fetchToken = async () => {
const response = await fetch('https://api.sandbox.monite.com/v1/auth/token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-monite-version': '2023-06-04' //Monite API version
},
body: JSON.stringify({
grant_type: 'entity_user',
client_id: 'SECRET_CLIENT_ID',
client_secret: 'SECRET_CLIENT_SECRET',
entity_user_id: 'SECRET_ENTITY_USER_ID'
})
});
return await response.json();
}
// Initialize the SDK
const monite = new MoniteSDK({
apiUrl: 'https://api.sandbox.monite.com/v1', // Or 'https://api.monite.com/v1' to use Production
entityId: 'ENTITY_ID',
fetchToken: fetchToken
});
function App() {
return (
<MoniteProvider monite={monite} locale={{ code: "en-US" }}>
<CounterpartsTable />
</MoniteProvider>
);
}
export default App;
Run the application
npm run start
yarn start
Updated about 1 month ago