Monite UI Widgets
Overview
Monite UI Widgets 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 Widgets to build React-based web applications for their client SMEs, powered by the Monite API.
UI Widgets are part of the Monite SDK.

An example of the CounterpartsTable component
Supported browsers
Monite UI Widgets support the five latest versions of major browsers: Chrome, Firefox, Safari, Edge, Opera.
Installation
npm install @team-monite/ui-widgets-react --save --force
or
yarn add @team-monite/ui-widgets-react
Components
You can browse https://sdk.dev.monite.com to explore the available components interactively and view additional documentation.
The available components are:
Component | Description |
---|---|
<MoniteProvider> | The root component that must wrap all other Monite-connected components. See the usage example below. |
Payables | |
<PayablesTable> | A table that displays the list of payable invoices that are available to the owner of the access token. Supports sorting, filtering, and pagination. |
<PayableDetails> | Displays the details of a single payable and lets the user edit these details. |
Tags | |
<TagsTable> | A table that displays the list of existing tags. Supports sorting and pagination. |
<TagFormModal> | The "create new tag" modal. |
<ConfirmDeleteModal> | The confirmation modal displayed before a tag is deleted. |
Counterparts | |
<CounterpartsTable> | A table that displays the list of counterparts of the authenticated entity. Supports sorting, filtering, and pagination. |
<CounterpartDetails> | Used to create a new counterpart, as well as view and edit the details of an existing counterpart. |
Approval policies | |
<ApprovalPoliciesTable> | A table that displays the list of existing approval policies of the authenticated entity. Supports searching, filtering, sorting, and pagination. |
Receivables | |
<ReceivablesTable> | A table that displays all existing receivables (outgoing invoices, quotes, credit notes) of the authenticated entity. The receivables are organized into tabs by their type. The table supports searching, filtering, sorting, and pagination. |
<CreateInvoice> | The "create new invoice" modal. |
<ReceivableDetails> | Displays the details of a single receivable document and lets the user edit these details. |
Usage
Before using Monite UI Widgets, 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 widgets, as shown below.
Example
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.
import { MoniteProvider, MoniteApp, CounterpartsTable } from '@team-monite/ui-widgets-react';
const monite = new MoniteApp({
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
token: 'ACCESS_TOKEN' // User access token
});
<MoniteProvider monite={monite}>
<CounterpartsTable />
</MoniteProvider>
Updated 11 days ago