Is searching possible?

[mtnowl]

Hello! I'm trying to add local search functionality like this example from epub.js, but it seems that it requires access to the book object. Is there some way to get access to that object? Or alternately, is there a better way to do search?

Thanks!

[AjayManikantaG]

@mtnowl You can access book object from renditionRef from below code.

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

const App = () => {
  // And your own state logic to persist state
  const [location, setLocation] = useState(null)
  const [firstRenderDone, setFirstRenderDone] = useState(false)
  const renditionRef = useRef(null)
  const locationChanged = epubcifi => {
    // Since this function is also called on initial rendering, we are using custom state
    // logic to check if this is the initial render.
    // If you block this function from running (i.e not letting it change the page on the first render) your app crashes.

    if (!firstRenderDone) {
      setLocation(localStorage.getItem('book-progress')) // getItem returns null if the item is not found.
      setFirstRenderDone(true)
      return
    }

    // This is the code that runs everytime the page changes, after the initial render.
    // Saving the current epubcifi on storage...
    localStorage.setItem('book-progress', epubcifi)
    // And then rendering it.
    setLocation(epubcifi) // Or setLocation(localStorage.getItem("book-progress"))
  }
  return (
    <div style={{ height: '100vh' }}>
      <ReactReader
        location={location}
        locationChanged={locationChanged}
        url="https://react-reader.metabits.no/files/alice.epub"
        getRendition={rendition => (renditionRef.current = rendition)}
      />
    </div>
  )
}

export default App

[mtnowl]

I don't see the book object in this code, am I missing something?