Skip to main content
The Bible components provide a complete set of UI elements for displaying Bible content, navigating through chapters, and managing notes.

​
BibleSelector

A searchable dropdown component for selecting different Bible translations.

​
Props

​
value
string
The currently selected Bible ID

​
Usage Example

import BibleSelector from '@/components/bible/bible-selector'

<BibleSelector value="KJV" />
The BibleSelector component automatically fetches available Bible translations using the useBibles hook and handles navigation when a Bible is selected.

​
BibleDropdown

A dual-select component for choosing Bible books and chapters.

​
Props

​
bible
string
The selected Bible translation ID
​
chapter
string
The currently selected chapter ID (format: book.chapter)

​
Usage Example

import BibleDropDown from '@/components/bible/bible-dropdown'

<BibleDropDown 
  bible="KJV" 
  chapter="GEN.1" 
/>
This component displays two select dropdowns: one for books and one for chapters. When a book is selected, it automatically navigates to the first chapter of that book.

​
ChapterNavigation

Navigation buttons for moving between Bible chapters.

​
Props

​
previous
object
Information about the previous chapter
​
next
object
Information about the next chapter

​
Usage Example

import ChapterNavigation from '@/components/bible/chapter-navigation'

<ChapterNavigation 
  previous={{ id: "GEN.1", bookId: "GEN", number: "1" }}
  next={{ id: "GEN.3", bookId: "GEN", number: "3" }}
/>
The navigation buttons are automatically disabled when there is no previous or next chapter available.

​
NoteEditor

A rich text editor component for creating and editing chapter notes.

​
Props

​
chapterId
string
required
The ID of the Bible chapter being annotated
​
userId
string
required
The ID of the user creating or editing the note

​
Usage Example

import NoteEditor from '@/components/bible/note-editor'

<NoteEditor 
  chapterId="GEN.1" 
  userId="user_123" 
/>
The NoteEditor uses the Plate editor and automatically loads existing notes for the specified chapter. It includes a toolbar for formatting and provides Save/Reset buttons.

​
Features

  • Rich text editing with formatting toolbar
  • Auto-save functionality
  • Loads existing notes on mount
  • Form validation using Zod schemas
  • Loading states during save operations

​
NotesView

A container component that conditionally displays the note editor with animations.

​
Props

​
openNotes
boolean
required
Whether the notes panel should be visible
​
userChapterBibleExists
boolean
required
Whether the user has access to the chapter/Bible combination
​
chapterId
string
required
The ID of the Bible chapter
​
userId
string
required
The ID of the user

​
Usage Example

import NotesView from '@/components/bible/notes-view'

<NotesView 
  openNotes={true}
  userChapterBibleExists={true}
  chapterId="GEN.1" 
  userId="user_123" 
/>
This component includes transition animations and suspense boundaries for loading states. It renders the NoteEditor only when the user has access to the content.