yui540/comimi-react

★ 17TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((comimi-react))
    What it does
      Manga viewer for React
      Page flipping
      Reading direction control
    Two usage modes
      MangaViewer component
      useMangaViewer hook
    Features
      Interactive React pages
      DRM image support
      Multi-language UI
      Progress persistence
    Compatibility
      React 18 and 19
      TypeScript
      Strict mode

mindmap root((comimi-react)) What it does Manga viewer for React Page flipping Reading direction control Two usage modes MangaViewer component useMangaViewer hook Features Interactive React pages DRM image support Multi-language UI Progress persistence Compatibility React 18 and 19 TypeScript Strict mode

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a full-featured manga reader to a React app with a single component, including page flipping, reading direction toggle, and keyboard navigation out of the box.

USE CASE 2

Embed live React components such as a like button or animated text inside comic pages that work with normal React state.

USE CASE 3

Load DRM-protected manga images by passing a custom fetch function that adds authentication headers to each page request.

USE CASE 4

Save reader progress and settings to browser storage so readers return to the same page in a later session.

Tech stack

TypeScriptReactnpm

Getting it running

Difficulty · easy Time to first run · 30min

Requires comimi and React as peer dependencies already installed in your project before adding this library.

In plain English

This is a small TypeScript library that makes it easier to use a manga reading tool called comimi inside a React app. Rather than building a comic reader from scratch, developers can drop in a ready-made viewer component or hook and get features like page flipping, reading direction, keyboard controls, and a settings panel without writing any of that themselves. The library sits on top of comimi and just bridges the gap to React. There are two ways to use it. One is a component called MangaViewer that you place in your JSX like any other UI element. You give it your manga data, set a reading direction, and it renders the viewer in that spot. The other option is a hook called useMangaViewer, which gives you more control over where and how the viewer attaches to the page. Both approaches share the same underlying code, so there is no functional difference between them. The viewer supports a few interesting extras. Pages can be plain images, but they can also contain live React components, meaning you could embed a like button or interactive text inside a comic page and it would work normally with React state. It also handles things like DRM-protected images by letting you supply a custom fetch function that adds authentication headers before loading each page image. Language support is built in, covering Japanese, English, Chinese, Korean, Thai, and Indonesian UI labels. Progress and settings can optionally be saved using the browser's built-in storage so readers can pick up where they left off. The library works with both React 18 and 19, including React's strict development mode. Installation is a single npm command, and comimi itself plus React are listed as peer dependencies, meaning they need to be already present in your project rather than being bundled inside this library.

Copy-paste prompts

Prompt 1

I am adding comimi-react to my React 18 manga site. Show me the minimum code to render MangaViewer with right-to-left reading direction and three image pages.

Prompt 2

I want to embed a React component, a like button, directly inside one of the comic pages rendered by comimi-react. How do I pass a React element as page content instead of a plain image URL?

Prompt 3

My manga images need custom authentication headers before loading. How do I wire a custom fetch function into comimi-react so it adds my auth token to each page image request?

Prompt 4

I want to use the useMangaViewer hook instead of the MangaViewer component so I have more control over layout. Show me a basic example of how the hook works and how I attach the viewer to a DOM element.

Open on GitHub → Explain another repo

← yui540 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.