'Is there a way to disable `user-select: none` in react-pdf?

I would like to allow users to copy and paste text from PDF documents. However when I inspect the page (with Chrome dev tools) where we are rendering the PDF document, I notice there are styles that set user-select to none. I can't find anything in the react-pdf documentation that indicates how to allow users to select text. Hoping someone knows how!

Here are the CSS rules that are defined on .react-pdf__Document > div > div > div. We could certainly override it with !important but I'm hoping there's another way.

{
    position: absolute;
    inset: 10px 20px;
    height: 1229.41px;
    width: 950px;
    user-select: none;
}
react-pdf


Solution 1:[1]

you can manually add user-select: none to the following class:

.react-pdf__Page__textContent

This works for me

Solution 2:[2]

The browser is responsible for handling user choices thus the user interface allows the user to copy print / read aloud or otherwise interact with the text transferred download either when using a real PDF download/renderer or in react-pdf cases a web reproduction of a PDF.js.

If you serve "Image Only" as PDF then the browser needs to use any OCR screen reader.

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zesi
Solution 2

Related Questions