@libraz/mejiro-react 0.4.0 → 0.6.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 +34 -60
  2. package/dist/index.d.ts +1673 -38
  3. package/dist/index.js +3854 -37
  4. package/package.json +35 -8
package/README.md CHANGED
@@ -3,88 +3,62 @@
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
+ To embed in normal page flow instead (a blog post, a docs page) with no height
35
+ math, use `fit="width"` — the reader self-sizes its height from its width:
65
36
 
66
37
  ```tsx
67
- import { useImageOverlay } from '@libraz/mejiro-react';
68
-
69
- const { imageRect, hasImage, toggleImage, onOverlayPointerDown, onResizePointerDown } =
70
- useImageOverlay(layout, spreadIdx, (spread) => setSpread(spread));
38
+ <MejiroReader epubUrl="/book.epub" fit="width" />
71
39
  ```
72
40
 
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. |
41
+ > Embedding inside a framework with an unlayered global CSS reset (Next.js,
42
+ > Tailwind preflight, normalize.css)? See the [cascade-layers note](https://github.com/libraz/mejiro/tree/main/docs/en/08-react-and-vue.md#css-cascade-layers-host-resets-can-clobber-the-reader-chrome)
43
+ > so host resets don't clobber the reader chrome.
79
44
 
80
- Returns `{ imageRect, hasImage, toggleImage, onOverlayPointerDown, onResizePointerDown }`.
45
+ ## Templates
81
46
 
82
- ## CSS
47
+ Copy-paste-ready starters live under [`examples/`](https://github.com/libraz/mejiro/tree/main/examples):
83
48
 
84
- ```ts
85
- import '@libraz/mejiro/render/mejiro.css';
49
+ ```bash
50
+ npx degit libraz/mejiro/examples/react my-reader
51
+ npx degit libraz/mejiro/examples/react-shelf my-library
52
+ npx degit libraz/mejiro/examples/react-editor my-editor
53
+ npx degit libraz/mejiro/examples/react-manuscript my-author
86
54
  ```
87
55
 
56
+ ## Documentation
57
+
58
+ - [React / Vue guide](https://github.com/libraz/mejiro/tree/main/docs/en/08-react-and-vue.md) — components, hooks, props, theming, SSR
59
+ - [Project README](https://github.com/libraz/mejiro)
60
+ - 日本語ドキュメント: [docs/ja/08-react-and-vue.md](https://github.com/libraz/mejiro/tree/main/docs/ja/08-react-and-vue.md)
61
+
88
62
  ## License
89
63
 
90
64
  [Apache License 2.0](https://github.com/libraz/mejiro/blob/main/LICENSE)