@boosters/book-reader v1.1.4

@boosters/book-reader

It is library which export only 1 component - Reader. It is used for reading books.

Usage

To use this library you should install it:

npm i @boosters/book-reader

Then you can import it:

import { BookReader, Book } from '@boosters/book-reader';

And use it:

<BookReader
  book={book as Book}
  onSwitchPage={({ direction, page }) => {
    console.log(direction, page);
  }}
  onClose={() => {
    console.log('close');
  }}
  initialItemId={22}
/>

Props

Types and interfaces

Events for onEvent callback

Book

type Book = {
  id: string
  title: string
  author: string
  chapters: Chapter[]
}

Chapter

type Chapter = {
  id: number
  uniq_id: number
  title: string
  subtitle: string
  paragraphs: Paragraph[]
}

Paragraph

type Paragraph = {
  id: number
  uniq_id: number
  type: 'text' | 'quote' | 'dialog'
  sentences: Sentence[]
}

Sentence

type Sentence = {
  id: number
  uniq_id: number
  elements: SentenceElement[]
}

SentenceElement

type SentenceElement = {
  id: number
  uniq_id: number
  text: string
  definition?: Definition
}

Definition

type Definition = {
  title: string
  description: string
  mp3?: string
}

BookReadyParams

type BookReadyParams = {
  pagesCount: number // total pages count (1 page - 1 column)
  actualPagesCount: number // pages count (1 page - 1 screen)
}

SwitchPageParams

type SwitchPageParams = {
  page: number
  direction: 'next' | 'prev'
  activeItemId: number
  progress: number
}

CloseParams

type CloseParams = {
  activeItemId: number
  progress: number
}

SettingsChangeParams

type SettingsChangeParams = {
  settings: Settings
  prevSettings: Settings
  changedParam: keyof Settings // 'theme' | 'fontFamily' | 'fontParams'
}

Link to Settings

Settings

type Settings = {
  theme: 'light' | 'dark'
  fontFamily: 'Andada' | 'Dysfont' | 'Manrope' | 'Lora' | 'Raleway'
  fontSize: number
}

EventParams

type EventParams<T = Record<string, any>> = { event: EventNames; data?: T }

Link to EventNames

ReaderSize

type ReaderSize = {
  width: number
  height: number
}