I need a little help with the customization of the table of contents for the react-reader. I was able to customize the content using getRendition and themes, but I couldn't find a way to customize the look and feel of the TOC.
This is my current working code:
<ReactReader
url={epubLink}
showToc={true}
swipeable={true}
location={location}
locationChanged={setLocation}
loadingView={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
}}
>
<Puff color="grey" />
</div>
}
getRendition={(rendition) => {
//compatibility fix
const spine_get = rendition.book.spine.get.bind(
rendition.book.spine
);
rendition.book.spine.get = function (target) {
var t = spine_get(target);
if (!t) {
t = spine_get(undefined);
}
return t;
};
//customizing theme
rendition.themes.register("custom", {
body: {
"font-family": "Helvetica, sans-serif",
},
});
rendition.themes.select("custom");
}}
/>