@boosters/book-reader

@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
}