Headless PDF & EPUB reader for React

EPUB reader built on EPUBJS v3

Суулгах

npm i steppe-web-reader

yarn add steppe-web-reader

Ашиглах

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

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

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

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

import { useReaderSettings } from "steppe-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 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 "steppe-web-reader";
const { changeSettings } = useReaderSettings();

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

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

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

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

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

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

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

Бүтэн дэлгэц

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

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

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

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

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

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

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

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

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