Props
| Prop | Type | Required | Default |
|---|
verses | ReadingVerse[] | undefined | No | — |
title | ReactNode | No | — |
citation | ReactNode | No | — |
children | ReactNode | No | — |
highlight | number | [number, number] | undefined | No | — |
onVerseAction | ((verse: ReadingVerse) => void) | undefined | No | — |
verseActionLabel | string | undefined | No | Add Note |
renderVerse | ((verse: ReadingVerse, context: ReadingVerseContext) => ReactNode) | undefined | No | — |
verseFont | "sans" | "serif" | undefined | No | — |
notedVerses | number[] | undefined | No | [] |
media | ReactNode | No | — |
actions | ReactNode | No | — |
footer | ReactNode | No | — |
loading | boolean | undefined | No | — |
empty | ReactNode | No | — |
error | ReactNode | No | — |
tone | "tint-1" | "tint-2" | "tint-3" | "tint-4" | "plain" | undefined | No | tint-2 |
Accessibility
An <article> with the title as an h2. Verse numbers are <sup> text beside the verse, and each verse pill is a button named "Add Note, verse 2" (or "Note added, verse 1"), 44px tall. The error block is role="alert"; loading sets aria-busy with a "Loading reading" label.
data-rebar-* attributes
data-rebar-component="reading-view", data-rebar-tone="tint-1".."tint-4" | "plain", data-rebar-state="loading" | "error". Parts: title, panel, citation, media, verses, verse (data-rebar-highlighted, data-rebar-noted), verse-number, verse-action, body, actions, footer, loading, empty, error.
Migrating to Ant Design
No equivalent. Use Typography.Paragraph inside a Card with a tinted background; the verse numbering and per-verse actions are the part to keep.
Custom verse rows, extra slot and verse font
A verse may carry extra, rendered under its text and pill inside the same row (an inline note composer). renderVerse(verse, { highlighted, noted, content }) replaces what follows the verse number (the number, highlight and noted marks stay); content is the default text, pill and extra to wrap. verseFont="sans" switches the verse text from the theme serif to the sans face.
<ReadingView verses={[{ num: 1, text: "In the beginning", extra: <NoteComposer /> }]} verseFont="sans" />