Skip to main content
Layer’s React components emit UI events when users interact with them. Subscribe to these events through the onEvent callback on <LayerProvider>’s eventCallbacks prop to power analytics, custom logging, or to react to user activity in your own application. 
import { LayerProvider } from "@layerfi/components";

<LayerProvider
  businessId="<layer_business_id>"
  businessAccessToken="<access_token>"
  eventCallbacks={{
    onEvent: (event) => {
      console.log('Layer event:', event.type, event.payload)
    },
  }}
>
  {...}
</LayerProvider>
The onEvent callback fires when users interact with embedded Layer components. Each event includes a type, version, event-specific payload, and metadata.

​
Event Structure

interface LayerEventEnvelope<TPayload extends object> {
  source: 'layer'
  type: LayerEventType
  version: 1
  payload: TPayload
  metadata: {
    component: LayerEventComponent
    timestamp: string
    packageVersion?: string
  }
}
The LayerEventType value, LayerEventComponent value, and LayerEvent type are exported from @layerfi/components for TypeScript users. LayerEvent is a discriminated union, so checking event.type narrows event.payload to the payload for that event.

​
Supported Events

All events listed below currently use version: 1.

Tasks Events

​
tasks.month_selected
Fired when a user selects a month in the Tasks component.
​
tasks.year_selected
Fired when a user selects a year in the Tasks component.
​
tasks.task_clicked
Fired when a user clicks on a task to expand or collapse it.

Bookkeeping Events

​
bookkeeping.schedule_call_clicked
Fired when a user clicks the button to schedule a call with a bookkeeper.

Profit and Loss Events

​
profit_and_loss.month_selected
Fired when a user selects a month on the Profit and Loss chart.

Transactions Events

​
transactions.search_submitted
Fired when a user submits a search query in the Bank Transactions component.
​
transactions.download_clicked
Fired when a user clicks to download transactions.
​
transactions.description_entered
Fired when a user saves a memo or description for a transaction.
​
transactions.receipt_upload_clicked
Fired when a user initiates a receipt upload for a transaction.
​
transactions.page_changed
Fired when a user navigates to a different page in the Bank Transactions list.

Reports Events

​
reports.navigated
Fired when a user navigates to a different report in the Unified Reports view.
​
reports.download_clicked
Fired when a user clicks to download a report.
​
reports.section_expanded
Fired when a user expands or collapses a section in a report table.

Linked Accounts Events

​
linked_accounts.add_account_clicked
Fired when a user clicks to add a new linked account.
​
linked_accounts.unlink_account_clicked
Fired when a user confirms unlinking a bank account.

​
Example Usage

import { LayerProvider, type LayerEvent, LayerEventType } from "@layerfi/components";

function App() {
  const handleLayerEvent = (event: LayerEvent) => {
    switch (event.type) {
      case LayerEventType.TransactionsSearchSubmitted:
        analytics.track('user_searched_transactions', {
          query: event.payload.query,
        })
        break
      case LayerEventType.TaskClicked:
        console.log('User clicked task:', event.payload.taskId)
        break
    }
  }

  return (
    <LayerProvider
      businessId="<layer_business_id>"
      businessAccessToken="<access_token>"
      eventCallbacks={{
        onEvent: handleLayerEvent,
      }}
    >
      {...}
    </LayerProvider>
  )
}