mangatsu-reader

Early experimental version! Used in Mangatsu.

A manga and comic and image web reader / viewer package written in TS and React.

Usage

Example

import { MangaReader, ReaderMode } from "mangatsu-reader"

const CustomSVG = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={64} height={64} fill="#fff">
    <!-- SVG content -->
    </svg>
  )
}

const pages = {
  {
    url: "http://localhost/page1.webp",
    number: 1,
    doublePage: false
  },
  {
    url: "http://localhost/page2.webp",
    number: 2,
    doublePage: false
  },
  {
    url: "http://localhost/page3.webp",
    number: 3,
    doublePage: true
  }
}

const App = () => {
  return (
    <MangatsuReader
      mode={ReaderMode.LeftToRight}
      controlDirection="ltr"
      doublePage={true}
      initialPage={0}
      pages={pages}
      style={{ height: "50vh" }}
      className="custom-class"
      loadingIcon={<CustomSVG />}
    />
  )
}

• @param mode the reading mode of the reader
• @param controlDirection the control direction of the reader
• @param doublePage whether to show two pages at once
• @param initialPage the initial page to start the reader (0-indexed)
• @param pages the pages of the manga/comic
• @param style custom styles for the reader
• @param className custom class name for the reader
• @param customImg custom image component to render the page

Props

• mode: ReaderMode
  • default: ReaderMode.LeftToRight
  • ReaderMode.LeftToRight: Left to Right page turning
  • ReaderMode.RightToLeft: Right to Left page turning
  • TODO ReaderMode.TopToBottomContinuous: Top to Bottom page turning with continuous scrolling
• controlDirection: "ltr" | "rtl" (default: "ltr")
  • defaults to the same as mode (ReaderMode.LeftToRight: "ltr", ReaderMode.RightToLeft: "rtl", otherwise "ltr")
  • ltr: Swipe left or press right arrow key to go to the next page, swipe right or press left arrow key to go to the previous page
  • rtl: Swipe right or press right arrow key to go to the next page, swipe left or press left arrow key to go to the previous page
• doublePage: boolean (true | false)
  • ※ no effect if mode is ReaderMode.TopToBottomContinuous
  • default: false
  • true: Show two pages at once
  • false: Show one page at once
• initialPage: number
  • default: 0
  • The initial page to show (0-indexed)
• pages: Page[]
  • required
  • The pages to show
  • Page:

    interface Page {
      url: string // the image url of the page
      doublePage: boolean // true if this page is a double page
    }

• style: React.CSSProperties | undefined
  • custom styles for the reader
• className: string | undefined
  • custom class name for the reader
• customImg: (props: unknown) => React.JSX.Element | undefined
  • custom image component to render the page
• loadingIcon: React.JSX.Element | undefined
  • custom loading icon to show while loading the image

Dependencies

• Included
  • (react-swipeable)[https://www.npmjs.com/package/react-swipeable]
• Required
  • React (>= 18.0.0)