villain-react

The open source web-based comic book reader that you need, but don't deserve.

Installation

$ yarn add villain-react

WebWorker

This project uses libarchivejs for extracting compressed archives, so you will need to provide the path of webworker:

The webworker bundle lives in libarchive.js/dist folder so you need to make sure that it is available in your public folder since it will not get bundled if you're using bundler (it's all bundled up already)

const workerUrl = 'path to ../build/worker-bundle.js',

Formats

Supported archives formats by libarchive.js

• ZIP
• 7-Zip
• RAR v4
• RAR v5
• TAR

Usage

Import the component and the css styles

// Component
import Villain from 'villain-react'
 
// Css styles
import 'villain-react/dist/style.css'
 
// Path of the comicbook archive, it can also be a file or blob
const url = './files/test.cbz'
 
// Path of the libarchivejs webworker bundle
const workerUrl = 'path to ../build/worker-bundle.js',
 
//...
 
<Villain source={url} options={opts} />

Props

Available props of the component:

Name	Type	Default	Description
style	Object	null	Inline styles for root container.
source	string, file, blob	null	Path or file source of the archive.
options	object	options	Options to customize the reader component
className	string	null	Custom css class name
workerUrl	string	null	Path to libarchive.js worker-bundle

Options

Available options to customize the reader component:

Name	Type	Default	Description
theme	string	'Light'	Choose CSS styling from between ('Light', 'Dark).
maxPages	number	500	Max number of pages to extract and render.
mangaMode	bool	false	Read right to left.
forceSort	bool	true	Fix sort order of pages (#235)
allowFullScreen	bool	true	Show full screen button.
autoHideControls	bool	false	Set initial auto hide state of toolbar.
allowGlobalShortcuts	bool	false	Allows shortcuts without having to focus the viewer.

Development

Run yarn command to install the dependencies.

To start the development run yarn start, this will open up localhost:8080 on your default browser:

• This uses webpack-dev-server and includes hot-reloading.

An example archive has been provided to play around inside ./build/testFile

• A good resource for archives can be found here: https://archive.org/details/comics.
• Alternative, any compressed folder (zip, rar, tar, etc) with a few images will also do the job.

Known issues

• Accessibility issues #23
• Some .rar and .cbr fail to load #1
• Encrypted archived are not yet supported #26

Credits

• 🛠 Created and maintained by @btzr-io with the help of some awesome contributors.

• 🎨 Logo and artworks designed by @btzr-io, see license.