React-secure-pdf-viewer-mngo NPM

react-secure-pdf-viewer-mngo

This library is available at react-secure-pdf-viewer-mngo

Demo

pdf.mngo.in

Brief:

A JavaScript React Library (npm package) to open any pdf (password protected or non-protected both) having thumbnail, jump to page, zoom features and security features like

✅ block right click
✅ disable user select
✅ block download
✅ block getting pdf url by inspecting elements
✅ block printing of the page/pdf
❌ screenshot
❌ screen recording
✅ open pdf in pdf viewer using the given password programmatically

Screenshots:

Usage

<MNgoSecurePDFViewer
    theming={{ [key: string]: string }}
    loadingRenderer={string | ReactElement}
    errorRenderer={string | ReactElement}
    securityOptions=={{ [key: string]: boolean }}
    pdfUrl={string}
    pdfPassword={string}
    compHeight={string}
/>

props example

theming different classes to override different style of elements

       {
            pdfComponentClassName: string
            toolbarClassName: string
            toolbarSegClassName: string
            toolBarBtnClassName: string
            pdfViewerClassName: string
            pdfPageClassName: string
            pdfThumbContainerClassName: string
            pdfThumbPageClassName: string
       }

loadingRenderer string or DOM element to show while pdf is loading
errorRenderer string or DOM element to show when pdf failed to load

securityOptions by default all security options are enabled,

        {
            blockRightClick: boolean, // by default true
            blockUserSelection: boolean, // by default true
            blockPrint: boolean, // by default true
            blockDownload: boolean, // by default true
       }

pdfUrl url (internal or extneral) of the pdf to open
pdfPassword password of the pdf if, the pdf is password protected
compHeight height of the component

Installation

npm install
npm start

Available Scripts

In the project directory, you can run

`npm start`

Runs the app in the development mode Open http://localhost:5173 to view it in the browser.

`npm run lib-build`

it is for final package build which create dist folder.

`npm publish`

to publish the project on npm

Note: do npm run lib-build before npm publish because it publishes dist folder as defined as key main, module, files in package.json, and do not forget to login in npm using npm login