Skip to main content
The BibleReader is a compound component that provides a complete Bible reading experience with chapter navigation, version selection, font customization, and optional user authentication.

​
Basic Usage

import { BibleReader } from '@youversion/platform-react-ui';

function MyApp() {
  return (
    <div style={{ height: '100vh' }}>
      <BibleReader.Root defaultVersionId={111}>
        <BibleReader.Content />
        <BibleReader.Toolbar />
      </BibleReader.Root>
    </div>
  );
}

​
Component Structure

BibleReader is a compound component with three parts:
  • BibleReader.Root - Container that manages state
  • BibleReader.Content - Displays the Bible text
  • BibleReader.Toolbar - Navigation and settings controls

​
Root Props

​
book
string
Controlled book ID (e.g., “JHN”, “GEN”).
​
defaultBook
string
Default book ID for uncontrolled mode.Default: "JHN"
​
onBookChange
(book: string) => void
Callback when book changes.
​
chapter
string
Controlled chapter ID (e.g., “1”, “2”).
​
defaultChapter
string
Default chapter ID for uncontrolled mode.Default: "1"
​
onChapterChange
(chapter: string) => void
Callback when chapter changes.
​
versionId
number
Controlled version ID.
​
defaultVersionId
number
Default version ID for uncontrolled mode.Default: 3034 (Berean Standard Bible)
​
onVersionChange
(versionId: number) => void
Callback when version changes.
​
fontFamily
FontFamily
Font family for Bible text. Options: “Inter”, “Source Serif”, or custom font family.Default: "Source Serif"
​
fontSize
number
Font size in pixels. Must be between 12 and 20.Default: 16
​
lineHeight
number
Line height multiplier.Default: undefined
​
showVerseNumbers
boolean
Whether to show verse numbers.Default: true
​
background
'light' | 'dark'
Theme override.Default: Inherits from provider

​
Toolbar Props

​
border
'top' | 'bottom'
Position of the toolbar border.Default: "top"

​
Examples

​
Uncontrolled (Default)

The component manages its own state: 
<BibleReader.Root defaultVersionId={111}>
  <BibleReader.Content />
  <BibleReader.Toolbar />
</BibleReader.Root>

​
Controlled Mode

You manage the state: 
import { useState } from 'react';
import { BibleReader } from '@youversion/platform-react-ui';

function ControlledReader() {
  const [book, setBook] = useState('GEN');
  const [chapter, setChapter] = useState('1');
  const [versionId, setVersionId] = useState(111);

  return (
    <BibleReader.Root
      book={book}
      onBookChange={setBook}
      chapter={chapter}
      onChapterChange={setChapter}
      versionId={versionId}
      onVersionChange={setVersionId}
    >
      <BibleReader.Content />
      <BibleReader.Toolbar />
    </BibleReader.Root>
  );
}

​
Custom Styling

<BibleReader.Root
  defaultVersionId={111}
  fontSize={18}
  lineHeight={2.0}
  fontFamily="'Georgia', serif"
  showVerseNumbers={false}
>
  <BibleReader.Toolbar border="bottom" />
  <BibleReader.Content />
</BibleReader.Root>

​
Dark Theme

<BibleReader.Root
  defaultVersionId={111}
  background="dark"
>
  <BibleReader.Content />
  <BibleReader.Toolbar />
</BibleReader.Root>

​
Without Authentication

Set authEnabled={false} on the provider to hide the user menu: 
<YouVersionProvider
  apiKey="your-api-key"
  authEnabled={false}
>
  <BibleReader.Root defaultVersionId={111}>
    <BibleReader.Content />
    <BibleReader.Toolbar />
  </BibleReader.Root>
</YouVersionProvider>

​
Features

  • Previous/Next chapter buttons
  • Chapter picker with searchable book list
  • Version picker with language filtering

​
Reader Settings

  • Font size adjustment (12-20px)
  • Font family selection (Inter, Source Serif)
  • Settings persist to localStorage

​
User Authentication

When authEnabled={true} on the provider:
  • User menu displays avatar or person icon
  • Sign in/out functionality
  • Integrates with YouVersion OAuth

​
Responsive Design

  • Mobile-friendly layout
  • Touch-optimized controls
  • Scrollable content area

​
Accessibility

  • Keyboard navigation
  • ARIA labels and roles
  • Screen reader announcements
  • Focus management

​
Persistence

User preferences are automatically saved to localStorage:
  • Font size: youversion-platform:reader:font-size
  • Font family: youversion-platform:reader:font-family
Preferences are loaded on mount and persist across sessions.

Build docs developers (and LLMs) love

Get started for freeTalk to us