binary-web-reader

$3

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";


;
;
`

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

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

console.log(settings.rendition);
`

EPUBJS v3 суурилсан ба 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: , navbar: "", toc: , search: } |

##### 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;
}
};

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;
}
};

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;
}
};

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;
annotations: Array;
rendition: any; // EPUBJS rendition object
showTOC?: boolean | false;
showNotes?: boolean | true;
readerStyle?: React.CSSProperties;
[key: string]: any;
}
`

$3

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

`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 Increase;
};
`

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

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

return Increase;
};
`

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

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

return {isFullscreen ? "Exit full screen" : "Full screen"};
};
`

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

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

return Search;
};
`

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

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

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

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