README
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
:hammer_and_wrench: Created and maintained by @btzr-io with the help of some awesome contributors.