0.3.2 • Published 9 months ago
steppe-web-reader v0.3.2
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>;
};
0.3.2
9 months ago
0.3.1
9 months ago
0.3.0
9 months ago
0.2.8
9 months ago
0.2.7
9 months ago
0.2.6
9 months ago
0.2.5
9 months ago
0.2.4
9 months ago
0.2.3
9 months ago
0.2.2
9 months ago
0.2.1
9 months ago
0.2.0
11 months ago
0.1.9
11 months ago
0.1.8
11 months ago
0.1.7
11 months ago
0.1.6
11 months ago
0.1.5
11 months ago
0.1.4
12 months ago
0.1.3
12 months ago
0.1.2
12 months ago
0.1.1
12 months ago
0.1.0
12 months ago
0.0.9
12 months ago
0.0.8
12 months ago
0.0.7
12 months ago
0.0.6
12 months ago
0.0.5
12 months ago
0.0.4
12 months ago
0.0.3
12 months ago
0.0.2
12 months ago
0.0.1
12 months ago