React SDKComponents and wrappers

TemplateSettings

Overview

The TemplateSettings component (alias DocumentSettings) enables users to customize their invoice look-and-feel and branding. Users can:

  • choose from several built-in PDF templates,
  • upload, replace, or remove the entity logo for PDFs,
  • change the format of document numbers for invoices, quotes, and other document types (for example, INV-00042 or IN/2025/042),
  • set the next number for invoices and other document types,
  • add or hide certain sections in PDFs (such as bank account details or signatures),
  • and more.

All options apply only to newly created documents and do not affect existing documents.

The TemplateSettings component displays the available settings in tabs:

TemplateSettings component: 'Layout and logo' tab
TemplateSettings component: 'Layout and logo' tab

Individual tabs are also available as standalone components in case you want to expose only a subset of the available settings or to organize the settings in a different layout:

The dialog form of TemplateSettings is embedded into InvoiceDetails for seamless invoice editing experience.

Permissions

To access and use the TemplateSettings component, the authenticated entity user must have a role with the read and update permissions for the entity resource.

Usage

Use the TemplateSettings component in your application as follows:

React
1import { TemplateSettings } from "@monite/sdk-react";
2
3...
4
5// This component must be rendered within the MoniteProvider wrapper
6const TemplateSettingsPage = () => {
7  return <TemplateSettings />
8};

Props

isDialog
booleanDefaults to false

If true, the component will be rendered inside a <Dialog> wrapper.

This prop also controls the component’s caption: “Template settings” (if false) or “Edit template settings” (if true).

isOpen
booleanDefaults to false

This prop has effect only if isDialog is true. It controls the overall visibility of the component.

handleCloseDialog
function

Has effect only if isDialog is true. This callback is triggered when the user closes the template settings dialog.

See also