A paged plain-text reader with original page-turn arrows.
Preview
Example source could not be loaded: book-example. Reload this page to retry.Usage
Import Book from @/components/ui/book and provide pages, a readonly array of plain strings. Use JavaScript \n escapes for paragraph breaks. page is a zero-based index; pair it with onPageChange, or supply defaultPage. The displayed index is clamped to the available pages.
The primary field guide supplies all three pages inline. At default scale 2 the 192 by 192 logical-pixel book occupies 384 by 384 browser pixels.
Composition
The reader has a fixed 114 logical-pixel text column and 128 logical-pixel page height. Split long content into pages yourself; it has no editing, Markdown or rich-content API. Empty arrays produce an empty first page.
Focus the group and press Left/Right or PageUp/PageDown. Only available direction buttons render. Pointer arrow activation plays the original page-turn sound unless turnSound={false}; keyboard paging does not request that sound. The page body exposes a named document role.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import * as React from "react";
import { AdventureImage } from "./minecraft-adventure-image";
import { playBookPageTurn } from "./minecraft-book-sound";
import { MinecraftDocumentText } from "./minecraft-document-text";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import "./minecraft-book.css";
interface BookLayoutStyle1 extends React.CSSProperties {Interactive playground
Page 1 of 3Verified coverage and limitations
Original book textures, arrows and bitmap text are retained. These short field-guide pages are new content; they do not establish a native pixel match for all wrapping, languages, overflow or page lengths.
The retained playground is additional interactive reference content. It is distinct from the maintained consumer example shown under Preview. Documentation layouts and controls are web adaptations; source/reference bytes and their original provenance remain authoritative for declared cases.