Bank Transactions

Bank account and credit card transactions ingested into Layer.

The transaction categorization component displays a list of transactions that have been imported into Layer. By default, the component has two tabs:

• To Review - Transactions that need to be reviewed/categorized before they will be journaled to the general ledger.
• Categorized - Transactions that have already been categorized and journaled to the general ledger.

Optional properties and useBankTransactionsContext give more control over the transactions list:

/** Using props */
<BankTransactions
  pageSize={50}
  showCustomerVendor
  showTags
  showTooltips
  monthlyView
  filters={{
    amount: { min: 0, max: 100 },
    query: "coffee"
  }}
  mobileComponent="mobileList"
  onError={(error) => console.error('Transaction error:', error)}
/>

/** Using hook */
const { setFilters } = useBankTransactionsContext()

setFilters({ amount: { min: 0, max: 10000 } })

<BankTransactions />

Properties

pageSize · number · default: "20"

Number of transactions to display per page. Controls pagination size.

showDescriptions · boolean · default: "true"

Controls whether transaction descriptions are displayed in the transaction list.

showReceiptUploads · boolean · default: "true"

Controls whether receipt upload functionality is available for transactions.

showTooltips · boolean · default: "false"

Controls whether tooltips are displayed to provide additional information about transactions and categorization.

showCustomerVendor · boolean · default: "false"

Controls whether the customer/vendor column is displayed in the transactions table.

showTags · boolean · default: "false"

Controls whether transaction tags are displayed and can be managed in the transaction list.

showUploadOptions · boolean · default: "false"

Controls whether upload options are displayed for transactions.

showStatusToggle · boolean · default: "true"

Controls whether the “To Review” / “Categorized” status toggle is displayed.

showCategorizationRules · boolean · default: "false"

Controls whether categorization rule suggestions are shown when categorizing transactions.

hideHeader · boolean · default: "false"

Hides the component header entirely.

collapseHeader · boolean · default: "false"

Collapses the component header into a more compact form.

monthlyView · boolean · default: "false"

Enables monthly view mode which changes the date filtering behavior to focus on monthly periods.

categorizeView · boolean

Controls whether the categorization interface is displayed. If not specified, this is automatically determined based on the business’s bookkeeping configuration.

mobileComponent · string · default: "regularList"

Indicates whether to use dedicated mobile-oriented layout for smaller screens. Possible values are mobileList or regularList. Defaults to regularList.

onError · function

Callback function that is called when an error occurs in the component. Receives a LayerError object as a parameter.

renderInAppLink · function

Custom function for rendering in-app navigation links. Receives LinkingMetadata as a parameter and should return a ReactNode.

stringOverrides · BankTransactionsStringOverrides

Overrides for default strings in the component.

Show BankTransactionsStringOverrides properties

bankTransactionHeader · string

Component header text. Defaults to “Bank Transactions”

bankTransactionCTAs · BankTransactionCTAStringOverrides

Overrides for button CTAs in the component.

Show BankTransactionCTAStringOverrides properties

approveButtonText · string

Override the “Approve” button text which saves transaction categorization. Defaults to “Approve”.

updateButtonText · string

Override for the “Update” button text which updates a transaction categorization. Defaults to “Update”.

transactionsTable · BankTransactionsTableStringOverrides

Overrides for the transactions table.

Show BankTransactionsTableStringOverrides properties

dateColumnHeaderText · string

Override for the “Date” column header text. Defaults to “Date”.

transactionColumnHeaderText · string

Override for the “Transaction” column header text. Defaults to “Transaction”.

accountColumnHeaderText · string

Override for the “Account” column header text representing the name of the source bank account. Defaults to “Account”.

amountColumnHeaderText · string

Override for the “Amount” column header text. Defaults to “Amount”.

categorizeColumnHeaderText · string

Override for the “Categorize” column header text. Shows only for uncategorized transactions. Defaults to “Categorize”.

categoryColumnHeaderText · string

Override for the “Category” column header text. Shows only for categorized transactions. Defaults to “Category”.

filters · BankTransactionFilters object

Filters to apply to the transaction list.

Show BankTransactionFilters properties

amount · NumericRangeFilter object

Range of amounts to filter the transaction list to.

Show NumericRangeFilter properties

min · number

Minimum value of transactions to list.

max · number

Maximum value of transactions to list.

account · string[]

Array of Financial Account IDs to filter to. Allows filtering by multiple accounts.

direction · enum

Direction of transactions to filter to. Possible values are CREDIT or DEBIT.

categorizationStatus · enum

Show only unreviewed or categorized transactions. Possible values are TO_REVIEW or CATEGORIZED.

dateRange · DateRange object

Date range to filter transactions to.

Show DateRange properties

startDate · ISO8601 timestamp

Start date to filter transactions to.

endDate · ISO8601 timestamp

End date to filter transactions to.

query · string

Search query to filter transactions by description, counterparty name, or other transaction details.

tagFilter · TagFilterInput object

Filter transactions by tags. Allows filtering by specific tag criteria.

applyGlobalDateRange · boolean · default: "false"

Indicates whether to apply the global date range filter to the transaction list. If set to true, changing the date range in any Layer component will filter the transaction list to that time range as well. Defaults to false.

Variations

• Bank Transactions with Linked Accounts