Integrations/Next.js

Next.js

Same as React. Client Component only.

'use client'

import { useEffect, useRef } from 'react'
import { Zine } from '@zinejs/core'
import { PdfSource } from '@zinejs/pdf'

export default function Flipbook() {
  const el = useRef(null)
  useEffect(() => {
    new Zine(el.current, { source: new PdfSource('https://zinejs.com/pdf/sample.pdf') })
  }, [])
  return <div ref={el} />
}