Binary-web-reader NPM

Headless PDF & EPUB reader for React

EPUB reader built on EPUBJS v3

Суулгах

npm i binary-web-reader

yarn add binary-web-reader

Ашиглах

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

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

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

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

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: <Comp/>, navbar: "<Comp/>", toc: <Comp/>, search: <Comp/> }`

Annotation

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

{
    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 жишээ

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 жишээ

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 жишээ

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

Тохиргоо

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`.

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

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

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

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

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

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

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

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

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

Бүтэн дэлгэц

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

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

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

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

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

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

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

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

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