SDK customization
Learn how to customize the components on the Monite React SDK.
Overview
The Monite components use the default settings by default. However, there are scenarios where you can to customize this settings to match the needs of your business.
Below, see a complete component settings object, with its parameters and default values. This object must be inserted into the <MoniteProvider>
component:
1 const componentSettings = { 2 general: {}, 3 approvalPolicies: { 4 pageSizeOptions: [20, 50, 100] 5 }, 6 approvalRequests: { 7 pageSizeOptions: [20, 50, 100] 8 }, 9 counterparts: { 10 pageSizeOptions: [20, 50, 100], 11 customerTypes: ["customer", "vendor"] 12 }, 13 payables: { 14 pageSizeOptions: [20, 50, 100], 15 isShowingSummaryCards: true, 16 fieldOrder: ["document_id", "counterpart_id", "created_at", "due_date", "status", "amount", "amount_paid", "pay"], 17 summaryCardFilters: { 18 "Overdue Invoices": { 19 status__in: ["waiting_to_be_paid"], 20 overdue: true 21 }, 22 "High-Value Invoices": { 23 amount__gte: 10000 24 } 25 }, 26 requiredColumns: ["document_id"], 27 optionalFields: { 28 invoiceDate: true, 29 tags: true 30 }, 31 ocrRequiredFields: { 32 currency: true, 33 invoiceDate: true, 34 counterpart: true, 35 invoiceNumber: true, 36 counterpartBankAccount: true, 37 document_issued_at_date: true, 38 dueDate: true, 39 tags: true, 40 counterpartName: true, 41 contactPerson: true, 42 issueDate: true, 43 amount: true, 44 appliedPolicy: true, 45 addedByUser: true, 46 addedOn: true, 47 updatedOn: true 48 }, 49 ocrMismatchFields: { 50 amount_to_pay: true, 51 counterpart_bank_account_id: true 52 }, 53 isTagsDisabled: false 54 }, 55 products: { 56 pageSizeOptions: [20, 50, 100] 57 }, 58 receivables: { 59 pageSizeOptions: [20, 50, 100], 60 tab: 0, 61 tabs: [ 62 { 63 label: "Invoices", 64 query: { type: "invoice" }, 65 filters: ["document_id__contains", "counterpart_id", "due_date__lte"] 66 }, 67 { 68 label: "Quotes", 69 query: { type: "quote" } 70 }, 71 { 72 label: "Credit notes", 73 query: { type: "credit_note" } 74 }, 75 { 76 label: "Financing", 77 query: { type: "financing" } 78 } 79 ], 80 onCreate: (receivableId) => {}, 81 onUpdate: (receivableId, invoice) => {}, 82 onDelete: (receivableId) => {}, 83 onInvoiceSent: (invoiceId) => {}, 84 enableEntityBankAccount: false, 85 bankAccountCountries: ["US", "DE", "GB"], 86 bankAccountCurrencies: ["USD", "EUR", "GBP"] 87 }, 88 tags: { 89 pageSizeOptions: [20, 50, 100] 90 }, 91 userRoles: { 92 pageSizeOptions: [20, 50, 100] 93 }, 94 onboarding: { 95 footerLogoUrl: "https://example.com/logo.png", 96 footerWebsiteUrl: "https://example.com", 97 hideFooter: false, 98 showContinueButton: false, 99 allowedCurrencies: ["USD", "EUR", "GBP"], 100 allowedCountries: ["US", "DE", "GB"], 101 onComplete: () => {}, 102 onContinue: () => {}, 103 onWorkingCapitalOnboardingComplete: (entityId) => {} 104 }, 105 financing: { 106 enableFinanceWidgetButton: true 107 } 108 };