UI Events

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

Fired when a user selects a month in the Tasks component.

Show payload

number

The selected year (e.g., 2024).

number

The selected month (1-12).

Fired when a user selects a year in the Tasks component.

Show payload

number

The selected year (e.g., 2024).

Fired when a user clicks on a task to expand or collapse it.

Show payload

string

The ID of the clicked task.

Bookkeeping Events

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

Show payload

Empty object.

Profit and Loss Events

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

Show payload

number

The selected year (e.g., 2024).

number

The selected month (1-12).

Transactions Events

Fired when a user submits a search query in the Bank Transactions component.

Show payload

string

The search query entered by the user.

Fired when a user clicks to download transactions.

Show payload

Empty object.

Fired when a user saves a memo or description for a transaction.

Show payload

string

The ID of the transaction.

Fired when a user initiates a receipt upload for a transaction.

Show payload

string

The ID of the transaction.

Fired when a user navigates to a different page in the Bank Transactions list.

Show payload

number

The page number the user navigated to.

Reports Events

Fired when a user navigates to a different report in the Unified Reports view.

Show payload

string

The key identifying the selected report.

Fired when a user clicks to download a report.

Show payload

string

The key identifying the report being downloaded.

Fired when a user expands or collapses a section in a report table.

Show payload

string

The key identifying the report section.

boolean

Whether the section is now expanded (true) or collapsed (false).

Linked Accounts Events

Fired when a user clicks to add a new linked account.

Show payload

Empty object.

Fired when a user confirms unlinking a bank account.

Show payload

string

The ID of the account being unlinked.

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>
  )
}

Overview

Components

Layouts

Event Structure

Supported Events

Example Usage

​Event Structure

​Supported Events

​Example Usage

Event Structure

Supported Events

Example Usage