bok-reader 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -0
- package/dist/bok.es.js +3432 -0
- package/dist/bok.umd.js +291 -0
- package/dist/main.d.ts +1 -0
- package/dist/style.css +1 -0
- package/dist/vite.svg +1 -0
- package/package.json +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# bok
|
|
2
|
+
|
|
3
|
+
A React component library for reading EPUB files. Built with React, TypeScript, and Vite.
|
|
4
|
+
|
|
5
|
+
The reader that is spawned will render a column view, with each column representing a page of the book. The user is able to change the font size, font family, side margin and toggle the reader in fullscreen.
|
|
6
|
+
|
|
7
|
+
Butt.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install bok
|
|
13
|
+
# or
|
|
14
|
+
yarn add bok
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
```jsx
|
|
20
|
+
import React from "react";
|
|
21
|
+
import { BokReader } from "bok";
|
|
22
|
+
import "bok/dist/style.css"; // this css file is absolutely necessary to render the component properly
|
|
23
|
+
|
|
24
|
+
function MyBookViewer() {
|
|
25
|
+
const epubUrl = "path/to/your/book.epub"; // Can be a URL, File object, or ArrayBuffer
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<div style={{ height: "100vh", width: "100vw" }}>
|
|
29
|
+
<BokReader epubDataSource={epubUrl} />
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export default MyBookViewer;
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Props to BokReader
|
|
38
|
+
|
|
39
|
+
- `epubDataSource`: `File | ArrayBuffer | string | null` - The source of the EPUB file (File object, ArrayBuffer, or URL string).
|
|
40
|
+
- `onTitleChange?`: `(title: string) => void` - Callback when the book title is loaded.
|
|
41
|
+
- `onLoadingChange?`: `(isLoading: boolean) => void` - Callback when the loading state changes.
|
|
42
|
+
- `onError?`: `(errorMsg: string) => void` - Callback when an error occurs during loading or processing.
|
|
43
|
+
- `supportedFonts?`: `{ displayName: string; name: string }[]` - Array of custom fonts to make available in the options menu.
|
|
44
|
+
- `color?`: `string` - Hexadecimal value. Color tint of the component.
|
|
45
|
+
- `style?`: `React.CSSProperties` - Optional inline styles for the main wrapper component.
|
|
46
|
+
|
|
47
|
+
## Development Scripts
|
|
48
|
+
|
|
49
|
+
- `npm run dev`: Start development server.
|
|
50
|
+
- `npm run build`: Build the library for production.
|
|
51
|
+
- `npm run lint`: Lint the project files.
|
|
52
|
+
- `npm run preview`: Preview the production build locally.
|
|
53
|
+
|
|
54
|
+
## Dependencies
|
|
55
|
+
|
|
56
|
+
- jszip
|
|
57
|
+
- react-spinners
|
|
58
|
+
- styled-components
|
|
59
|
+
|
|
60
|
+
## Peer Dependencies
|
|
61
|
+
|
|
62
|
+
- react >=18.3.1
|
|
63
|
+
- react-dom >=18.3.1
|