Update README.md

README.md

@@ -1,26 +1,137 @@
-# react-epub-viewer
+<div align=left>
-Epub Viewer for React.js powered by [Epub.js](https://github.com/futurepress/epub.js/)
+    <br />
+    <a href="https://github.com/altmshfkgudtjr/react-epub-viewer"><img src="https://user-images.githubusercontent.com/47492535/115000155-73a3ae80-9edd-11eb-8ae9-a19e1c012d35.png" alt="react_epub" style="zoom:50%;" /></a>
+    <br />
+    <br />
+</div>
 
 
+# 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
 
+<br />
 
 
-## ReactViewer
 
-- [x] **`onTocChange`** Event
+## Getting Started
-- [x] **`onBookInfoChange`** Event
+
-- [x] **`onPageChange`** Event
+📢 **[Online demo](https://altmshfkgudtjr.github.io/react-epub-viewer)**
-- [x] **`onSelection`** Event
+
-  - Fire with `mouseup` event
+**Features**
-- [x] Custom Loading Component
+
+- 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 (
+    <div style={{ position: "relative", height: "100%" }}>
+      <ReactEpubViewer 
+        url={'files/Alices Adventures in Wonderland.epub'}
+        ref={viewerRef}
+      />
+    </div>
+  );
+}
+
+export default App
+```
+
+You can find other parameters in [Component Props](##Component Props).
+
+
+
+<br />
+
+
+
+## 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
+
+
+
+<br />
+
+
+
+---
+
+