@libraz/mejiro-react 0.4.0 → 0.5.0

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.
Files changed (4) hide show
  1. package/README.md +26 -63
  2. package/dist/index.d.ts +1546 -38
  3. package/dist/index.js +3685 -37
  4. package/package.json +35 -8
package/README.md CHANGED
@@ -3,87 +3,50 @@
3
3
  [![npm version](https://img.shields.io/npm/v/@libraz/mejiro-react.svg)](https://www.npmjs.com/package/@libraz/mejiro-react)
4
4
  [![license](https://img.shields.io/npm/l/@libraz/mejiro-react.svg)](https://github.com/libraz/mejiro/blob/main/LICENSE)
5
5
 
6
- React components and hooks for [mejiro](https://www.npmjs.com/package/@libraz/mejiro) vertical text rendering.
7
-
8
- > **Experimental** — API may change in future releases.
6
+ React components and hooks for [mejiro](https://www.npmjs.com/package/@libraz/mejiro) — vertical text rendering plus full-featured `MejiroReader` / `MejiroEditor` / `MejiroManuscriptEditor` components.
9
7
 
10
8
  ## Install
11
9
 
12
10
  ```bash
13
- npm install @libraz/mejiro @libraz/mejiro-react
11
+ npm install @libraz/mejiro @libraz/mejiro-react react
12
+ npm install -D @types/react
14
13
  ```
15
14
 
16
- Peer dependency: `react >= 18`
15
+ Peer dependency: `react >= 18`.
17
16
 
18
- ## Quick Start
17
+ ## Quick start
19
18
 
20
19
  ```tsx
21
- import { DEFAULT_HEADING_STYLES, MejiroBook } from '@libraz/mejiro/book';
22
- import { parseEpub } from '@libraz/mejiro/epub';
23
- import { MejiroPageView } from '@libraz/mejiro-react';
24
- import '@libraz/mejiro/render/mejiro.css';
25
-
26
- const book = new MejiroBook({
27
- fontFamily: '"Noto Serif JP"',
28
- fontSize: 16,
29
- lineSpacing: 1.8,
30
- headingStyles: DEFAULT_HEADING_STYLES,
31
- });
32
- book.computePageSize(containerEl);
33
-
34
- const epub = await parseEpub(buffer);
35
- const layout = await book.layoutChapter(epub.chapters[0]);
36
- const spread = layout.getSpread(0);
37
-
38
- <MejiroPageView result={spread.right} fontFamily='"Noto Serif JP"' lineSpacing={1.8} />
39
- ```
40
-
41
- ## Components
42
-
43
- ### `MejiroPageView` (Recommended)
44
-
45
- Renders a `PageResult` from `ChapterLayout`. Automatically switches between CSS `vertical-rl` and slot-based rendering when images are present.
46
-
47
- | Prop | Type | Description |
48
- |------|------|-------------|
49
- | `result` | `PageResult` | Required. Page result from `ChapterLayout`. |
50
- | `fontFamily` | `string` | CSS font family (used in slot-based mode). |
51
- | `lineSpacing` | `number` | Line spacing multiplier (used in slot-based mode). |
52
- | `slotMode` | `boolean` | Force slot-based rendering (set when layout has images). |
53
- | `className` | `string` | Additional CSS class name. |
54
- | `style` | `CSSProperties` | Additional inline styles. |
55
-
56
- ### `MejiroPage` (Low-Level)
20
+ import '@libraz/mejiro/render/mejiro-fonts.css'; // optional webfonts
21
+ import { MejiroReader } from '@libraz/mejiro-react';
57
22
 
58
- Renders a `RenderPage` using CSS `writing-mode: vertical-rl`. For use with the lower-level `buildRenderPage()` API.
23
+ export default function App() {
24
+ return <MejiroReader epubUrl="/book.epub" />;
25
+ }
26
+ ```
59
27
 
60
- ## Hooks
28
+ `MejiroReader` fills its container, so the root chain needs an explicit height:
61
29
 
62
- ### `useImageOverlay`
30
+ ```css
31
+ html, body, #root { height: 100%; margin: 0; }
32
+ ```
63
33
 
64
- Manages a draggable/resizable image overlay with automatic text reflow.
34
+ ## Templates
65
35
 
66
- ```tsx
67
- import { useImageOverlay } from '@libraz/mejiro-react';
36
+ Copy-paste-ready starters live under [`examples/`](https://github.com/libraz/mejiro/tree/main/examples):
68
37
 
69
- const { imageRect, hasImage, toggleImage, onOverlayPointerDown, onResizePointerDown } =
70
- useImageOverlay(layout, spreadIdx, (spread) => setSpread(spread));
38
+ ```bash
39
+ npx degit libraz/mejiro/examples/react my-reader
40
+ npx degit libraz/mejiro/examples/react-shelf my-library
41
+ npx degit libraz/mejiro/examples/react-editor my-editor
42
+ npx degit libraz/mejiro/examples/react-manuscript my-author
71
43
  ```
72
44
 
73
- | Parameter | Type | Description |
74
- |-----------|------|-------------|
75
- | `layout` | `ChapterLayout \| null` | Current chapter layout. |
76
- | `spreadIdx` | `number` | Current spread index. |
77
- | `onUpdate` | `(spread: SpreadResult) => void` | Called after every reflow. |
78
- | `options?` | `UseImageOverlayOptions` | Default dimensions, position, and margin. |
45
+ ## Documentation
79
46
 
80
- Returns `{ imageRect, hasImage, toggleImage, onOverlayPointerDown, onResizePointerDown }`.
81
-
82
- ## CSS
83
-
84
- ```ts
85
- import '@libraz/mejiro/render/mejiro.css';
86
- ```
47
+ - [React / Vue guide](https://github.com/libraz/mejiro/tree/main/docs/en/08-react-and-vue.md) — components, hooks, props, theming, SSR
48
+ - [Project README](https://github.com/libraz/mejiro)
49
+ - 日本語ドキュメント: [docs/ja/08-react-and-vue.md](https://github.com/libraz/mejiro/tree/main/docs/ja/08-react-and-vue.md)
87
50
 
88
51
  ## License
89
52