$ yarn add villain-reactThis component uses the libarchivejs for the extraction process,
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 opts = {
workerUrl: 'path to ../build/worker-bundle.js',
...
}Import the component and the css styles
// Component
import Villain from 'villain-react'
// Css styles
import 'villain-react/dist/style.min.css'
// Path of the comicbook archive
const url = '/files/test.cbz'
//...
<Villain file={url} options={opts} />Available options to customize the reader component:
| Name | Type | Default | Description |
|---|---|---|---|
| workerUrl | string | null | path to libarchive.js worker-bundle. |
| allowFullScreen | bool | true | Show full screen button. |
| autoHideControls | bool | false | Set inital auto hide state of toolbar. |
| preview | number | null | Load and render only the provided number of images. |
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.
-
🛠️ Created and maintained by @btzr-io with the help of some awesome contributors.