# @boosters/book-reader > It is library which export only 1 component - Reader. It is used for reading books. Latest version **1.3.1** (published 2026-02-02) · 0 weekly downloads ## Install ```sh npm install @boosters/book-reader pnpm add @boosters/book-reader yarn add @boosters/book-reader bun add @boosters/book-reader ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.3.1 | | Published | 2026-02-02 | | First published | 2023-06-20 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 5 | | Unpacked size | 1.9 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Promova | | Maintainers | intel.boosters | ## Links - npm: https://www.npmjs.com/package/@boosters/book-reader - npm.io page: https://npm.io/package/@boosters/book-reader ## Dependencies (5) - [react-redux](https://npm.io/package/react-redux.md) ^8.1.0 - [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0 - [react-swipeable](https://npm.io/package/react-swipeable.md) ^7.0.1 - [@reduxjs/toolkit](https://npm.io/package/@reduxjs/toolkit.md) ^1.9.5 - [react-tiny-popover](https://npm.io/package/react-tiny-popover.md) ^7.2.4 ## Recent versions - 1.3.1 (latest) — 2026-02-02 - 1.3.0 — 2025-12-10 - 1.2.17 — 2025-09-05 - 1.2.16 — 2024-12-10 - 1.2.15 — 2024-11-25 - 1.2.14 — 2024-10-30 - 1.2.13 — 2024-10-29 - 1.2.12 — 2024-10-29 - 1.2.11 — 2024-10-29 - 1.2.10 — 2024-10-29 - 1.2.9 — 2024-10-29 - 1.2.8 — 2024-10-29 - 1.2.7 — 2024-10-29 - 1.2.6 — 2024-07-02 - 1.2.5 — 2024-07-01 - … 56 more at https://npm.io/package/@boosters/book-reader/versions ## README # @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: ```bash npm i @boosters/book-reader ``` Then you can import it: ```js import { BookReader, Book } from '@boosters/book-reader'; ``` And use it: ```tsx { console.log(direction, page); }} onClose={() => { console.log('close'); }} initialItemId={22} /> ``` ## Props | Name | Type | Default value | Description | |--------------------|:----------------------------------------------------------------------------------|:-------------:|--------------------------------------------------------------------------------------------------------------------| | `book` | [Book](#book_type) | - | Book object | | `onBookReady` | (params: [BookReadyParams](#book_ready_params_type) => void | - | Callback which call when book content is ready | | `onSwitchPage` | (params: [SwitchPageParams](#switch_page_params_type) => void | - | Callback which call when user switch page | | `onClose` | (params: [CloseParams](#close_params_type) => void | - | Callback which call when user click close button | | `initialItemId` | number | - | paragraph id, which must be opened on opening reader | | `onSettingsChange` | (settings: [SettingsChangeParams](#settings_change_params_types)) => void | - | Callback which call when change reader settings | | `initialSettings` | Partial<[Settings](#settings_type)> | - | 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` | >(params: [EventParams](#event_params_types)< T>) => void | - | Callback which call on events which do not affect the logic of the component. [Events table](#onevent_events_table) | | `readerSize` | [ReaderSize](#reader_size_type) | - | 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](#definition_type) | Event which is dispatched when the look-up popover is opened | | `look_up_play_audio_clicked` | [Definition](#definition_type) | Event which is dispatched when the user clicked the listen button on the look-up popover | | `look_up_bookmark_clicked` | [Definition](#definition_type) | 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 ```ts type Book = { id: string title: string author: string chapters: Chapter[] } ``` ### Chapter ```ts type Chapter = { id: number uniq_id: number title: string subtitle: string paragraphs: Paragraph[] } ``` ### Paragraph ```ts type Paragraph = { id: number uniq_id: number type: 'text' | 'quote' | 'dialog' sentences: Sentence[] } ``` ### Sentence ```ts type Sentence = { id: number uniq_id: number elements: SentenceElement[] } ``` ### SentenceElement ```ts type SentenceElement = { id: number uniq_id: number text: string definition?: Definition } ``` ### Definition ```ts type Definition = { title: string description: string mp3?: string } ``` ### BookReadyParams ```ts type BookReadyParams = { pagesCount: number // total pages count (1 page - 1 column) actualPagesCount: number // pages count (1 page - 1 screen) switchToNextPage: () => void switchToPrevPage: () => void } ``` ### SwitchPageParams ```ts type SwitchPageParams = { page: number direction: 'next' | 'prev' activeItemId: number progress: number } ``` ### CloseParams ```ts type CloseParams = { activeItemId: number progress: number } ``` ### SettingsChangeParams ```ts type SettingsChangeParams = { settings: Settings prevSettings: Settings changedParam: keyof Settings // 'theme' | 'fontFamily' | 'fontParams' } ``` Link to [Settings](#settings_type) ### Settings ```ts type Settings = { theme: 'light' | 'dark' fontFamily: 'Andada' | 'Dysfont' | 'Manrope' | 'Lora' | 'Raleway' fontSize: number } ``` ### EventParams ```ts type EventParams> = { event: EventNames; data?: T } ``` Link to [EventNames](#onevent_events_table) ### ReaderSize ```ts type ReaderSize = { width: number height: number } ``` --- _Source: https://npm.io/package/@boosters/book-reader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._