React components and wrappers

Learn about components and wrappers on the Monite React SDK.

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.

1import { MoniteSDK } from "@monite/sdk-api";
2
3const 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:

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.

1import { MoniteProvider } from "@monite/sdk-react";
2
3return (
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:

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.

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.

1return (
2 <Dialog open alignDialog="right">
3 <InvoiceDetails id="INVOICE_ID" />
4 </Dialog>
5);
PropsTypeDescription
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.
fullScreenbooleanWhen 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.
openbooleanThis 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 the InvoiceDetails or CounterpartDetails components as modals.

The IconWrapper component

The IconWrapper component is wrapper that allows you to customize the closing button of SDK screens. It includes:

  • Compatibility with Material UI theming.
  • Accessibility features, such as customizable aria-label.
  • Optional tooltips for additional context.
  • Dynamic icon swapping on hover.
  • Integration of custom event handlers (onClick, onHover).
IconWrapper component
IconWrapper component

Import the IconWrapper component as shown:

1import { IconWrapper } from "@monite/sdk-react";
2
3return (
4 <IconWrapper
5 icon={<CustomIcon />}
6 fallbackIcon={<ArrowBackIcon />}
7 tooltip="Go back"
8 onClick={() => console.log('Icon clicked')}
9 isDynamic={true}
10 />
11);

The following table shows all the IconWrapper component properties and their description:

PropsTypeDescription
icon.objectA custom icon to be displayed, which can be any React node, SVG, image, or component.
fallbackIconobjectA fallback icon used when icon is not provided.
tooltipstringTooltip text displayed on hover.
color("inherit"| "default"| "primary"| "secondary"| "error"| "info"| "success"| "warning")Icon color, using MUI theme colors. It defaults to ‘default’.
onClickfunctionTriggered when button click.
onHoverfunctionTriggered for hover events.
isDynamicbooleanDetermines if icon changes on hover.
ariaLabelOverridestringCustom aria-label for screen readers, defaults based on icon.
sxobjectMUI system properties for custom styling.