All the optional props are required

[marked29]

Hello

I used react-pageflip on my pet project which was written in ReactJS using TypeScript as well and there was one problem regarding props . Documentation says that the only required props for HTMLFlipBook are width and height but in real use it turned out that not only these props are required.

I checked node_modules/react-pageflip and it turned out that a lot of props are required indeed. I provided local solution for my project but I reckon that some changes should happen in original code base that it could correspond to the documentation and not to be confusing.

I can fix the issue if you want me to fix it.

Best regards, Mark

[YoonJeongLulu]

How can I see your local solution?

[aldrichdev]

I am also getting this issue.

I imported HTMLFlipbook like this:

import HTMLFlipBook from 'react-pageflip'

Even if I add all the required properties with default values, I get an error Invalid flipping time once the PDF loads.

[umair-dmechs]

Getting the same issue. You must have to make the optional props to be optional props. currently, almost every prop is a required prop.

[ghost]

I figured this out this problem and, until this gets fixed, the only workaround is to override the types yourself. I did this by importing the types itself and extending it to an interface then wrapping it with a Partial generic works.

Here's a hack I've haphazardly implemented of getting most the types to be optional in Next.js:

"use client"

import dynamic from "next/dynamic"
import type { IEventProps, IFlipSetting } from "react-pageflip/build/html-flip-book/settings"

interface HTMLFilpPageOverride extends Partial<IFlipSetting & IEventProps> {
  className?: string
  style?: React.CSSProperties
  children: React.ReactNode
  renderOnlyPageLengthChange?: boolean
  ref?: any
}

const HTMLFlipBook = dynamic(() => import("react-pageflip"), {
  ssr: false
}) as React.ComponentType<HTMLFilpPageOverride>

export default function BookWrapper() {
  return (
    <HTMLFlipBook width={300} height={500}>
      <div className="demoPage">Page 1</div>
      <div className="demoPage">Page 2</div>
      <div className="demoPage">Page 3</div>
      <div className="demoPage">Page 4</div>
    </HTMLFlipBook>
  )
}