react-reader

React Reader 是一个基于 epub.js 的 React 封装库。它提供了一个简单的方式来在 React 应用中嵌入一个功能完整的 ePub 阅读器。这个库的设计理念是简单易用，同时又不失灵活性，使得开发者可以快速集成电子书阅读功能，而无需深入了解 ePub 格式的复杂性。

主要特性：

简单集成：只需几行代码就可以在你的 React 应用中添加一个功能齐全的 ePub 阅读器。
响应式设计：自适应不同屏幕尺寸，提供良好的移动端体验。
自定义样式：支持自定义阅读器的样式，以匹配你的应用设计。
阅读进度保存：内置了保存和恢复阅读位置的功能。
目录导航：支持显示和使用电子书的目录进行导航。
灵活配置：提供了多个配置选项，可以根据需求进行调整。

安装：首先，通过 npm 安装 React Reader：

npm install react-reader

基本使用

以下是一个基本的使用示例：

import React, { useState } from 'react'
import { ReactReader } from 'react-reader'

const App = () => {
  const [location, setLocation] = useState(null)
  const locationChanged = (epubcifi) => {
    setLocation(epubcifi)
  }

  return (
    <div style={{ height: '100vh' }}>
      <ReactReader
        url="/path/to/your/epub/file.epub"
        location={location}
        locationChanged={locationChanged}
      />
    </div>
  )
}

export default App

在这个例子中，我们创建了一个简单的 React 组件，它使用 ReactReader 来显示一个 ePub 文件。location 状态用于保存当前的阅读位置，locationChanged 函数在阅读位置改变时被调用，更新 location 状态。

自定义样式

<ReactReader
  styles={{
    reader: {
      backgroundColor: '#f2f2f2'
    }
  }}
  // ... 其他属性
/>

显示目录

<ReactReader
  showToc={true}
  // ... 其他属性
/>

自定义渲染选项

在 React Reader 中，epubOptions 属性允许你自定义 ePub 内容的渲染方式。这些选项直接传递给底层的 epub.js 库，让你能够更精细地控制阅读体验。

<ReactReader
  epubOptions={{
    flow: 'scrolled',
    manager: 'continuous'
  }}
  // ... 其他属性
/>

让我们详细看看一些重要的选项：

1. 流式布局（flow）

flow 选项决定了内容如何在页面上流动。有两个主要的值：

'paginated'（默认）：内容被分成离散的页面，用户通过翻页来阅读。
'scrolled'：内容在一个长滚动的页面中连续显示，用户通过滚动来阅读。

示例：

<ReactReader
  epubOptions={{
    flow: 'scrolled'
  }}
  // ... 其他属性
/>

2. 管理器（manager）

manager 选项决定了内容如何被加载和管理。主要有两个值：

'default'：适用于分页布局，一次加载一个章节。
'continuous'：适用于滚动布局，可以连续加载多个章节。

示例：

<ReactReader
  epubOptions={{
    flow: 'scrolled',
    manager: 'continuous'
  }}
  // ... 其他属性
/>

3. spread

spread 选项控制是否在宽屏设备上显示双页布局：

'auto'（默认）：根据屏幕宽度自动决定是否使用双页布局。
'none'：始终使用单页布局。

示例：

<ReactReader
  epubOptions={{
    spread: 'none'
  }}
  // ... 其他属性
/>

4. 自定义样式（styles）

虽然不是 epubOptions 的一部分，但 styles 属性也值得一提。它允许你自定义阅读器的外观：

<ReactReader
  styles={{
    reader: { backgroundColor: '#f2f2f2' },
    arrow: { color: '#000' }
  }}
  // ... 其他属性
/>

5. 渲染器选项（renderOptions）

renderOptions 是 epubOptions 的一个子选项，可以进一步自定义渲染行为：

<ReactReader
  epubOptions={{
    renderOptions: {
      width: '100%',
      height: '100%',
      ignoreClass: 'annotator-hl'
    }
  }}
  // ... 其他属性
/>

最佳实践和注意事项

性能考虑：使用 'scrolled' 流式布局和 'continuous' 管理器可能会影响大型 ePub 文件的性能。在处理大文件时要谨慎使用。
响应式设计：考虑使用 spread: 'auto' 来适应不同的屏幕尺寸。
自定义样式：使用 styles 属性时，注意不要过度修改以致影响阅读体验。
兼容性测试：在不同设备和浏览器上测试你的设置，确保良好的跨平台体验。

本文作者：Maeiee

本文链接：react-reader

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！