comimi-react

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.