From ce977a8d3acdb891e406f8d005a872730a5468b2 Mon Sep 17 00:00:00 2001 From: NB <47492535+altmshfkgudtjr@users.noreply.github.com> Date: Fri, 16 Apr 2021 19:39:31 +0900 Subject: [PATCH] Update README.md --- README.md | 139 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 125 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 52db1fd..5f8a8b5 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,137 @@ -# react-epub-viewer -Epub Viewer for React.js powered by [Epub.js](https://github.com/futurepress/epub.js/) +
+
+ react_epub +
+
+
+# React-Epub-Viewer +[![Latest Stable Version](https://img.shields.io/npm/v/react-epub-viewer.svg?style=for-the-badge)](https://www.npmjs.com/package/react-epub-viewer) [![License](https://img.shields.io/badge/license-mit-red.svg?style=for-the-badge)](https://www.npmjs.com/package/react-epub-viewer) +**React-Epub-Viewer** is Epub Viewer for React.js powered by [Epub.js](https://github.com/futurepress/epub.js/) v0.3 -## EpubViewer +You can use React-Epub-Viewer together with React. -If you put ref as an argument, the module will register the viewer as an `iframe` in the ref. Also, there are some functions written in the ref by default. -- [x] **`handleKeyPress`** Function -- [x] **`onLocationChange`** Function -- [x] **`selectionChanged`** Function +
-## ReactViewer -- [x] **`onTocChange`** Event -- [x] **`onBookInfoChange`** Event -- [x] **`onPageChange`** Event -- [x] **`onSelection`** Event - - Fire with `mouseup` event -- [x] Custom Loading Component +## Getting Started + +📢 **[Online demo](https://altmshfkgudtjr.github.io/react-epub-viewer)** + +**Features** + +- Table of contents +- Setting + - Font + - Font size + - Line height + - Viewer horizontal margin + - Viewer vertical margin +- Change viewer type + - Scrolled-doc [`true`/`false`] + - Spread [`true`/`false`] + +- Current Page Information + - Current chapter name + - Current page number + - Total page number +- Move page by arrow keys +- Highlight (Using `mouseup` event) + - Select highlight color + + + +### Getting the Code + +Install library from [NPM](https://www.npmjs.com/package/react-epub-viewer) + +```shell +npm install react-epub-viewer +``` + +Import viewer component + +```javascript +import { useRef } from 'react' +import { + EpubViewer, + ReactEpubViewer +} from 'react-epub-viewer' + +const App = () => { + const viewerRef = useRef(null); + + return ( +
+ +
+ ); +} + +export default App +``` + +You can find other parameters in [Component Props](##Component Props). + + + +
+ + + +## Component Props + +You can see also Types for React-Epub-Viewer [here](https://github.com/altmshfkgudtjr/react-epub-viewer/blob/main/src/types/index.d.ts). + + + +### EpubViewer Props + +- `ref` [RefObject] Viewer Ref + +- `url` [string] - Epub file path +- `epubFileOptions` - [[object](http://epubjs.org/documentation/0.3/#book)] Epub file option (Epub.js BookOption) +- `epubOptions` - [[object](http://epubjs.org/documentation/0.3/#rendition)] Epub viewer option (Epub.js RenditionOption) +- `style` - [object] Epub wrapper style +- `location` - [string] Epub [CFI](http://idpf.org/epub/linking/cfi/epub-cfi.html) or Spine href +- `bookChanged` - [function] Run when epub book changed +- `renditionChanged` - [function] Run when rendition changed +- `pageChanged` - [function] Run when page changed +- `tocChanged` - [function] Run when toc changed +- `selectionChanged` - [function] Run when selected +- `loadingView` - [ReactNode] React Loading Component + + + +### ReactEpubViewer Props + +- `ref` [RefObject] Viewer Ref + +- `url` [string] - Epub file path +- `viewerLayout` - [object] Viewer layout values (header height, footer height, etc...) +- `viewerOption` - [object] Viewer option (whether is flow or is spread) +- `onBookInfoChange` - [function] Run when book information changed +- `onPageChange ` - [function] Run when page changed +- `onTocChange ` - [function] Run when toc changed +- `onSelection ` - [function] Run when selected +- `loadingView` - [ReactNode] React Loading Component + + + +
+ + + +--- + +