@team-monite/ui-widgets-react NPM

Monite UI Widgets

A library of ready-to-use React components connected to the Monite API. These components display the data served from the Monite API and also provide data editing functionality.

Note: This package is part of a monorepo. See the main README for more information.

Requirements

Node.js 16 or later.
At least 8 GB RAM on each development workstation.
A partner account registered with Monite. For details, see Get started with Monite API.

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

yarn add @team-monite/ui-widgets-react

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.

This example displays a list of an entity's counterparts:

import { MoniteSDK } from '@team-monite/sdk-api';
import {
  MoniteProvider,
  CounterpartsTable,
} from '@team-monite/ui-widgets-react';

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: async () => {
    const response = await fetch('https://api.sandbox.monite.com/v1/auth/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-monite-version': '2023-03-14' //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 response.json();
  },
});

<MoniteProvider monite={monite}>
  <CounterpartsTable />
</MoniteProvider>;

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.