### Headless PDF & EPUB reader for React

EPUB reader built on EPUBJS v3

#### Суулгах

```bash
npm i binary-web-reader
```

```bash
yarn add binary-web-reader
```

#### Ашиглах

_**WebReader**_ компонентийг ашиглахын тулд _**ReaderProvider**_. дотор байх шаардлагатай. Жишээ нь:

```jsx
import { WebReader, ReaderProvider } from "binary-web-reader";

<ReaderProvider>
    <WebReader name="Book name" baseUrl={"http://localahost:3000/files/epub1.epub"} />;
</ReaderProvider>;
```

Уншигчийн тохиргоонд хандах:

```javascript
import { useReaderSettings } from "binary-web-reader";
const { settings } = useReaderSettings();

console.log(settings.rendition);
```

[EPUBJS v3](https://www.npmjs.com/package/epubjs) суурилсан ба `settings.rendition` объектод EPubJS - ийн rendition хадгалсан учир уншигчийн тохиргоог EPubJS - ийн documentation-с харан өөрийн хүссэнээр удирдах боломжтой.

#### Documentation

##### Props

| Name                | Type     | Description                                                                                                                   |
| ------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------- |
| name                | String   | Номны нэр                                                                                                                     |
| baseUrl             | String   | Татах хаяг                                                                                                                    |
| xhrOptions          | Object   | {requestMethod: "GET", requestHeaders: { Authorization: "Bearere 123198kjnkajdnasd" }}                                        |
| textToSpeech        | Function | Аудио тоглуулах товчин дээр дарах үед дуудагдана.                                                                             |
| annotations         | String   | Хэрэглэгчийн хадгалсан тэмдэглэл, тодруулга эшлэлүүд                                                                          |
| onDeleteAnnnotation | Function | Тэмдэглэл устгах үед дуудагдана. Уг функц `true` буцаасан үед номноос тэмдэглэл устана                                        |
| onCreateAnnotation  | Function | Тэмдэглэл нэмэх үед дуудагдана. Уг функц `true` буцаасан үед ном дээр тэмдэглэл зурагдана.                                    |
| onUpdateAnnotation  | Function | Тэмдэглэл засах үед дуудагдана. Уг функц `true` буцаасан үед ном дээр тэмдэглэл засагдана.                                    |
| components          | Object   | Компонентууд. Өөрчлөх шаардлагатай тохиололд дамжуулна `{ notes: <Comp/>, navbar: "<Comp/>", toc: <Comp/>, search: <Comp/> }` |

##### Annotation

Дараах бүтэцтэй үүснэ

```javascript
{
    createdAt: "Mon Aug 28 2023 09:03:49 GMT+0800 (Ulaanbaatar Standard Time)", // Үүсгэсэн огноо
    originalText: "EPUB3 ", // Номон дээрх тектс
    range: "epubcfi(/6/8!/4/2/8[n1]/2,/1:34,/1:40)",
    text: "test", // Тэмдэглэлийн текст
    type: "mark" // "mark", "underline", "cite", "highlight"
}
```

##### onDeleteAnnotation жишээ

```javascript
const onDeleteAnnotation = async (annotation) => {
    try {
        await fetch("URL");
        return true;
    } catch (error) {
        return false;
    }
};

<WebReader
    name="Book name"
    onDeleteAnnotation={onDeleteAnnotation}
    baseUrl={"http://localahost:3000/files/epub1.epub"}
/>;
```

##### onUpdateAnnotation жишээ

```javascript
const onUpdateAnnotation = async (annotation) => {
    try {
        await fetch("URL");
        return true;
    } catch (error) {
        return false;
    }
};

<WebReader
    name="Book name"
    onUpdateAnnotation={onUpdateAnnotation}
    baseUrl={"http://localahost:3000/files/epub1.epub"}
/>;
```

##### onCreateAnnotation жишээ

```javascript
const onCreateAnnotation = async (annotation) => {
    try {
        await fetch("URL");
        return true;
    } catch (error) {
        return false;
    }
};

<WebReader
    type="epub"
    name="Book name"
    onCreateAnnotation={onCreateAnnotation}
    baseUrl={"http://localahost:3000/files/epub1.epub"}
/>;
```

#### Тохиргоо

```typescript
export default interface IReaderSettings {
    theme?: string | "light";
    highlightColor?: string | "yellow";
    isFullscreen?: boolean | false;
    toc: Array<ITableOfContent>;
    annotations: Array<any>;
    rendition: any; // EPUBJS rendition object
    showTOC?: boolean | false;
    showNotes?: boolean | true;
    readerStyle?: React.CSSProperties;
    [key: string]: any;
}
```

### `useReaderSettings`.

##### Уншигчийн тохиргоог өөрчлөх

```javascript
import { useReaderSettings } from "binary-web-reader";
const { changeSettings } = useReaderSettings();

changeSettings({
    highlightColor: "#FF11FF",
});
```

##### Фонтны хэмжээ нэмэх

```javascript
import { useReaderSettings } from "binary-web-reader";
const Example = (props) => {
    const { increaseFontSize } = useReaderSettings();

    return <button onClick={increaseFontSize}>Increase</button>;
};
```

##### Фонтны хэмжээ хасах

```javascript
import { useReaderSettings } from "binary-web-reader";
const Example = (props) => {
    const { decreaseFontSize } = useReaderSettings();

    return <button onClick={decreaseFontSize}>Increase</button>;
};
```

##### Бүтэн дэлгэц

```javascript
import { useReaderSettings } from "binary-web-reader";
const Example = (props) => {
    const { toggleFullscreen, isFullscreen } = useReaderSettings();

    return <button onClick={toggleFullscreen}>{isFullscreen ? "Exit full screen" : "Full screen"}</button>;
};
```

##### Хайх модал нээх, хаах

```javascript
import { useReaderSettings } from "binary-web-reader";
const Example = (props) => {
    const { toggleSearch } = useReaderSettings();

    return <button onClick={toggleSearch}>Search</button>;
};
```

##### Тэмлэглэл нээх,хаах

```javascript
import { useReaderSettings } from "binary-web-reader";
const Example = (props) => {
    const { settings, toggleNotes } = useReaderSettings();
    return <button onClick={toggleNotes}>{`${!settings.showNotes ? "Open" : "Close"} annotations`}</button>;
};
```

##### Тодруулах өнгө өөрчлөх

```javascript
import { useReaderSettings } from "binary-web-reader";
const Example = (props) => {
    const { changeHightlight } = useReaderSettings();
    return <button onClick={() => changeHighlight("#FF0000")}>Red highlight</button>;
};
```
