React-pdf: inputRef gives an error when passed an object, but isn't working when passed a function

[millscan]

I'm trying to call the innerHeight of the Document after loading, using the inputRef. This works if i do:

const previewRef = useRef()

However, I get the following error:
index.js:1375 Warning: Failed prop type: Invalid prop inputRef of type object supplied to Document, expected function

But when I try to pass the ref in as a function:

previewRef.current is undefined.

Am I missing something?

Thanks

[wojtekmaj]

Indeed as documentation states, inputRef must be a function currently. I think it should be easy to improve so we could also apply other ref types.

[CrocoDillon]

Using React's useRef hook

const ref = useRef(null)

<Document inputRef={ref} ... />

gives

Warning: Failed prop type: Invalid prop `inputRef` of type `object` supplied to `Document`, expected `function`.

Not sure what the correct proptype should be for the object refs... maybe this?

Document.propTypes = {
  inputRef: oneOfType([func, shape({
    current: node,
  })])
}

Workaround:

<Document inputRef={r => (ref.current = r)} ... />

[joelpoloney]

On react-pdf v5, if I pass a function to the inputRef property in the way that @CrocoDillon suggested, it doesn't ever get set.

I'm working in TypeScript and the following code actually works just fine, but it throws unnecessary errors in the console:

const [file, setFile] = React.useState<File | null>(null)
const canvasRef = React.createRef<HTMLDivElement>()

...

<Document file={file} onLoadSuccess={onDocumentLoadSuccess} inputRef={canvasRef}>
  <PdfPage pageNumber={page} />
</Document>

However, this code does not actually work, despite throwing no errors in the console:

const [file, setFile] = React.useState<File | null>(null)
const canvasRef = React.useRef<HTMLDivElement | null>()

...

<Document file={file} onLoadSuccess={onDocumentLoadSuccess} inputRef={(ref) => (canvasRef.current = ref)}>
  <PdfPage pageNumber={page} />
</Document>

Any ideas?

Edit The issue I was running into was more about things not getting triggered like they were before. I'd recommend removing the error altogether because it works just fine by passing in the result from a React.createRef call. I have it working via the function but it has really strange behavior.

@wojtekmaj what's wrong with passing in the result of a React.createRef in v5?

[wojtekmaj]

@wojtekmaj what's wrong with passing in the result of a React.createRef in v5?

After analysis, nothing really. At the moment of writing it's only a problem in Page component, where inputRef is called like this:

https://github.com/wojtekmaj/react-pdf/blob/1f9ae5249aa2ff6f1c621d4867b5739388b4259e/src/Page.jsx#L366-L373

This, however, can easily be changed by using merge-refs library.

So that's exactly what I did in b38ee57dea66f8801687662fd93cfa4374df7c03, which closes this issue.

[joelpoloney]

Thank you for fixing this so quickly!

[wojtekmaj]

Will need to wait for a while for a release, I'm having slight problems with manual testing lately.