@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

| Name | Type | Default value | Description | |--------------------|:----------------------------------------------------------------------------------|:-------------:|--------------------------------------------------------------------------------------------------------------------| | book | Book | - | Book object | | onBookReady | (params: BookReadyParams => void | - | Callback which call when book content is ready | | onSwitchPage | (params: SwitchPageParams => void | - | Callback which call when user switch page | | onClose | (params: CloseParams => void | - | Callback which call when user click close button | | initialItemId | number | - | paragraph id, which must be opened on opening reader | | onSettingsChange | (settings: SettingsChangeParams) => void | - | Callback which call when change reader settings | | initialSettings | Partial<Settings> | - | Initial reader settings | | fullScreen | boolean | true | If true the height of reader would be 100% of viewport | | bookmarks | boolean | false | If true the words with definition has a bookmark button | | onEvent | <T = Record<string, any>>(params: EventParams< T>) => void | - | Callback which call on events which do not affect the logic of the component. Events table | | readerSize | ReaderSize | - | Width and height params for reader | | dyslexicMode | boolean | false | If true the main font switch to Dysfont exclude book content |

Types and interfaces

Events for onEvent callback

| Name | Data | Description | |------------------------------|:------------------------------:|--------------------------------------------------------------------------------------------| | look_up_shown | Definition | Event which is dispatched when the look-up popover is opened | | look_up_play_audio_clicked | Definition | Event which is dispatched when the user clicked the listen button on the look-up popover | | look_up_bookmark_clicked | Definition | Event which is dispatched when the user clicked the bookmark button on the look-up popover | | settings_button_clicked | - | Event which is dispatched when the user clicked the settings button |

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)
  switchToNextPage: () => void
  switchToPrevPage: () => void
}

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
}