platform-bible-react
    Preparing search index...

    Interface FootnoteListProps

    Interface defining the properties for the FootnoteList component

    interface FootnoteListProps {
        ariaLabel?: string;
        className?: string;
        classNameForItems?: string;
        editingFootnoteIndex?: number;
        footnotes: MarkerObject[];
        formatCaller?: (
            caller: undefined | string,
            index: number,
        ) => undefined | string;
        layout?: FootnoteLayout;
        listId: string | number;
        onFocusedFootnoteChange?: (index: undefined | number) => void;
        onFootnoteEditRequested?: (
            footnote: MarkerObject,
            index: number,
            listId: string | number,
            caretPosition: FootnoteCaretPosition,
        ) => void;
        onFootnoteSelected?: (
            footnote: MarkerObject,
            index: number,
            listId: string | number,
        ) => void;
        renderEditingFootnote?: (
            footnote: MarkerObject,
            index: number,
        ) => ReactNode;
        selectedFootnote?: MarkerObject;
        selectionRequest?: unknown;
        showMarkers?: boolean;
        suppressFormatting?: boolean;
    }
    Index

    Properties

    ariaLabel? className? classNameForItems? editingFootnoteIndex? footnotes formatCaller? layout? listId onFocusedFootnoteChange? onFootnoteEditRequested? onFootnoteSelected? renderEditingFootnote? selectedFootnote? selectionRequest? showMarkers? suppressFormatting?

    Properties

    ariaLabel?: string

    Localized accessible name for the list, announced by screen readers when focus reaches a row.

    'Footnotes'
    className?: string

    Optional additional class name for styling

    classNameForItems?: string

    Optional additional class name for styling the Card for each FootnoteItem in the list

    editingFootnoteIndex?: number

    Index of the footnote currently being edited in place, if any. When set (and renderEditingFootnote is provided), that row renders the editor slot instead of its read-only display and is highlighted as the active editing row.

    footnotes: MarkerObject[]

    The footnotes to display (typically from JSX). See FootnoteItemProps.footnote

    formatCaller?: (caller: undefined | string, index: number) => undefined | string

    A function that can interpret the two special footnote caller codes defined by USFM, + and - in order to display (or suppress display of) a meaningful caller in the context where this is being used.

    layout?: FootnoteLayout

    Determines how footnotes are displayed:

    • 'horizontal': the note's marker and caller appear in a leading-aligned column, with the note text in a second column (typically used in a wide pane below the text).
    • 'vertical': the note's marker and caller appear on the first line, with the note text displayed beneath (typically used side-by-side with the text).

    A leading \fr/\xo target reference is part of the note text in both layouts, as it is in PT9's notes pane - it is not aligned in a column of its own.

    'horizontal'
    listId: string | number

    ID provided by the caller that should change whenever the list changes (due to additions, deletions or — unlikely — reordering).

    Changing it re-mints every read-only row. The row named by FootnoteListProps.editingFootnoteIndex is exempt: it hosts a live editor holding state no prop carries, and it stays mounted across list-id changes so a note added or removed elsewhere cannot discard an edit in progress.

    onFocusedFootnoteChange?: (index: undefined | number) => void

    Fires when keyboard or pointer focus lands on a row (with its index) and when it leaves one (with undefined). Focus on a row is not a selection - only a click, Enter, or Space selects - but a consumer can still follow it, e.g. to mark the focused note in the text as the user Tabs or arrows through the list. Focus moving from one row to the next reports undefined and then the new index.

    onFootnoteEditRequested?: (
        footnote: MarkerObject,
        index: number,
        listId: string | number,
        caretPosition: FootnoteCaretPosition,
    ) => void

    Callback requesting that a footnote open for editing (e.g. swap the row for an inline editor). When provided, a row click or Enter keypress fires this INSTEAD of onFootnoteSelected; Space still fires onFootnoteSelected. caretPosition maps the click point into the note text (see FootnoteCaretPosition); keyboard activation passes 'end'.

    onFootnoteSelected?: (
        footnote: MarkerObject,
        index: number,
        listId: string | number,
    ) => void

    Callback to handle clicking/selecting a footnote in the list

    renderEditingFootnote?: (footnote: MarkerObject, index: number) => ReactNode

    Render prop for the in-place editor shown for editingFootnoteIndex's row. The list stays presentation-only: it never imports an editor component; the consumer supplies one (e.g. an inline FootnoteEditor).

    selectedFootnote?: MarkerObject

    The currently selected footnote (or undefined if none)

    selectionRequest?: unknown

    Identity token for the CURRENT selection request. The reveal-on-select scroll keys on this token's identity in addition to the derived selected index, so a REPEAT selection of the same footnote — same object, same index — brings its row back into view again. Pass a value whose identity changes on every selection application (e.g. the host's per-selection state object); when omitted, re-reveal happens only when the selected index changes.

    showMarkers?: boolean

    Flag indicating whether to display USFM-style markers

    suppressFormatting?: boolean

    Flag indicating whether to suppress USFM-style formatting.

    false

    Settings

    Member Visibility

    On This Page

    Properties