@boosters/book-reader v1.2.14
@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 |
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 |
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
}
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago