HomeGuidesRecipesAPI ExplorerForumSandboxSupport

React UI components

Learn about Monite's React UI Components

Suggest Edits

Overview

Monite UI Components 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.

An example of the CounterpartsTable component

A preview of the CounterpartsTable component

Supported browsers

Monite UI Components support the five latest versions of major browsers: Chrome, Firefox, Safari, Edge, Opera.

Installation

npm install @team-monite/ui-widgets-react

yarn add @team-monite/ui-widgets-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

The 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:

PropertyTypeDescription
apiUrlstringThe URL for the API in use.
entityIdstringThe Monite entity to which the entity user belongs.
fetchTokenfunctionA custom function that returns authorization tokens for authenticating subsequent requests

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.

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:

PropsTypeDescription
moniteobjectThis accepts the object configuration for the MoniteSDK instance defined.
localeobjectThis 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.

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 Monite UI Components, 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 @team-monite/ui-widgets-react

yarn add @team-monite/ui-widgets-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 '@team-monite/sdk-api';
import {
  MoniteProvider,
  CounterpartsTable,
} from '@team-monite/ui-widgets-react';

Create the fetchToken function

The 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-04-12' 
    },
    // 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

const 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

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={{
      currencyLocale: "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={{ currencyLocale: "en-US" }}>
  <CounterpartsTable />
</MoniteProvider>

Review the result

If you followed this tutorial, your code should look like this:

import { MoniteSDK } from '@team-monite/sdk-api';
import {
  MoniteProvider,
  CounterpartsTable,
} from '@team-monite/ui-widgets-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-04-12' //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={{ currencyLocale: "en-US" }}>
    	<CounterpartsTable />
    </MoniteProvider>
  );
}

export default App;

Run the application

npm run start

yarn start

import { MoniteSDK } from '@team-monite/sdk-api';
import {
  MoniteProvider,
  CounterpartsTable,
} from '@team-monite/ui-widgets-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={{ currencyLocale: "en-US" }}>
    	<CounterpartsTable />
    </MoniteProvider>
  );
}

export default App;

Run the application

npm run start

yarn start

Updated 9 days ago