npmpackage.info

Gathering detailed insights and metrics for @talaikis/pdf-viewer-reactjs

@talaikis/pdf-viewer-reactjs - 2.2.3 | npmpackage.info

@talaikis/pdf-viewer-reactjs

A simple PDF viewer for React js

2.2.3

145

MIT

JavaScript

33.95 kB

2.9

Installations

npm install @talaikis/pdf-viewer-reactjs

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

18.11.0

NPM Version

8.19.2 Pull Requests

Open

21

Total

31

Closed

4

Merged

6

Issues

Open

29

Total

87

Closed

58

Releases

v3.0.0-beta.2

Updated on Mar 20, 2021

v3.0.0-beta.1

Updated on Mar 05, 2021

v2.2.3

Updated on Feb 15, 2021

v2.2.2

Updated on Jan 31, 2021

v2.2.1

Updated on Jan 30, 2021

v2.2.0

Updated on Jan 27, 2021

View All 22 releases

Languages

JavaScript

HTML

CSS

Shell

JavaScript (96.61%)

HTML (1.73%)

CSS (1.51%)

Shell (0.15%)

Developer

ansu5555

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

145 Stars

170 Commits

67 Forks

1 Watchers

23 Branches

7 Contributors

Updated on Feb 27, 2025

Maintainers

View All 7 Contributors

Package Meta Information

Latest Version

2.2.3

Package Id

@talaikis/pdf-viewer-reactjs@2.2.3

Unpacked Size

33.95 kB

Size

8.51 kB

File Count

NPM Version

8.19.2

Node Version

18.11.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

@talaikis/pdf-viewer-react

Note. This fork is purely personal design related, no new functionality here, so do not use.

Simple react PDF Viewer component with controls like

Page navigation
Zoom
Rotation

Every element can be styled upon your preferences using default classes your own and also custom react element can be passed.

it is originally forked from mgr-pdf-viewer-react

Example: Live demo is available here

How to install

npm install pdf-viewer-reactjs

Note:

Due to causing broken css issue bulma, bulma-helpers & material-design-icons are removed from dependencies and added as peerDependencies

Please install bulma, bulma-helpers & material-design-icons from npm by yourself or provide custom css as per your requirement

How to use

1import React from 'react'
2import PDFViewer from 'pdf-viewer-reactjs'
3
4const ExamplePDFViewer = () => {
5    return (
6        <PDFViewer
7            document={{
8                url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
9            }}
10        />
11    )
12}
13
14export default ExamplePDFViewer

Documentation

React component prop. types:

document:

Type:

1PropTypes.shape({
2    url: String, // URL to the pdf
3    base64: String, // PDF file encoded in base64
4})

Required: true
Description: Provides a way to fetch the PDF document

password:
- Type: String
- Required: false
- Description: For decrypting password-protected PDFs
withCredentials:
- Type: Boolean
- Required: false
- Description: Indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers. The default is false
page:
- Type: Number
- Required: false
- Description: The page that will be shown first on document load
scale:
- Type: Number
- Required: false
- Description: Scale factor relative to the component parent element
scaleStep:
- Type: Number
- Required: false
- Description: Scale factor to be increased or decreased on Zoom-in or zoom-out
maxScale:
- Type: Number
- Required: false
- Description: Maximun scale factor for zoom-in
minScale:
- Type: Number
- Required: false
- Description: Minimum scale factor for zoom-out
rotationAngle:
- Type: Number
- Required: false
- Description: Initial rotation of the document, values can be -90, 0 or 90
onDocumentClick:
- Type: Function
- Required: false
- Description: A function that will be called only on clicking the PDF page itself, NOT on the navbar
onPrevBtnClick:
- Type: Function
- Required: false
- Description: A function that will be called on clicking on the previous page button, page number can be accessed in the function.
onNextBtnClick:
- Type: Function
- Required: false
- Description: A function that will be called on clicking on the next page button, page number can be accessed in the function.
onZoom:
- Type: Function
- Required: false
- Description: A function that will be called on clicking on Zoom controls, zoom scale can be accessed in the function.
onRotation:
- Type: Function
- Required: false
- Description: A function that will be called on clicking on Rotation controls, rotation angle can be accessed in the function.
getMaxPageCount:
- Type: Function
- Required: false
- Description: A function that will be called on clicking on document load, total page count can be accessed in the function.
css:
- Type: String
- Required: false
- Description: CSS classes that will be setted for the component wrapper
canvasCss:
- Type: String
- Required: false
- Description: CSS classes that will be setted for the PDF page
hideNavbar:
- Type: Boolean
- Required: false
- Description: By default navbar is displayed, but can be hidden by passing this prop
navbarOnTop:
- Type: Boolean
- Required: false
- Description: By default navbar is displayed on bottom, but can be placed on top by passing this prop
hideZoom:
- Type: Boolean
- Required: false
- Description: By default zoom buttons are displayed, but can be hidden by passing this prop
hideRotation:
- Type: Boolean
- Required: false
- Description: By default rotation buttons are displayed, but can be hidden by passing this prop
loader:
- Type: Node
- Required: false
- Description: A custom loader element that will be shown while the PDF is loading
alert:
- Type: Node
- Required: false
- Description: A custom alerf element that will be shown on error

showThumbnail:

Type:

1PropTypes.shape({
2    scale: PropTypes.number, // Thumbnail scale, ranges from 1 to 5
3    rotationAngle: PropTypes.number, // Thumbnail rotation angle, values can be -90, 0 or 90. Default is 0
4})

Required: false
Description: Details of the thumbnails, not shown if not provided

protectContent:
- Type: Boolean
- Required: false
- Description: By default Right Click and Context Menu are enabled, but can be disabled by passing this prop

watermark:

Type:

1PropTypes.shape({
2    text: PropTypes.string, // Watermark text
3    diagonal: PropTypes.bool, // Watermark placement true for Diagonal, false for Horizontal
4    opacity: PropTypes.string, // Watermark opacity, ranges from 0 to 1
5    font: PropTypes.string, // custom font name default is 'Comic Sans MS'
6    size: PropTypes.string, // Fontsize of Watermark
7    color: PropTypes.string, // Color(hexcode) of the watermark
8})

Required: false
Description: Details of the watermark, not shown if not provided

navigation:

Type:

1PropTypes.oneOfType([
2    // Can be an object with css classes or react elements to be rendered
3    PropTypes.shape({
4        css: PropTypes.shape({
5            navbarWrapper: String,  // CSS Class for the Navbar Wrapper
6            zoomOutBtn: String,  // CSS Class for the ZoomOut Button
7            resetZoomBtn: String,  // CSS Class for the Reset Zoom Button
8            zoomInBtn: String,  // CSS Class for the ZoomIn Button
9            previousPageBtn: String,  // CSS Class for the PreviousPage button
10            pageIndicator: String,  // CSS Class for the Page Indicator
11            nextPageBtn: String,  // CSS Class for the NextPage button
12            rotateLeftBtn: String,  // CSS Class for the RotateLeft button
13            resetRotationBtn: String,  // CSS Class for the Reset Rotation button
14            rotateRightBtn: String  // CSS Class for the RotateRight button
15        })
16    // Or a full navigation component
17    PropTypes.any // Full navigation React element
18]);

Required: false
Description: Defines the navigation bar styles and/or elements.

Author

Image of Author

Ansuman Ghosh

ansu5555.com

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

7

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codacy-analysis.yaml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/ansu5555/pdf-viewer-reactjs/codacy-analysis.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/codacy-analysis.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/ansu5555/pdf-viewer-reactjs/codacy-analysis.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yaml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/ansu5555/pdf-viewer-reactjs/codeql-analysis.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yaml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/ansu5555/pdf-viewer-reactjs/codeql-analysis.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yaml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/ansu5555/pdf-viewer-reactjs/codeql-analysis.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yaml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/ansu5555/pdf-viewer-reactjs/codeql-analysis.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/continuous-integration.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/ansu5555/pdf-viewer-reactjs/continuous-integration.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/continuous-integration.yaml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/ansu5555/pdf-viewer-reactjs/continuous-integration.yaml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/continuous-integration.yaml:25
Warn: npmCommand not pinned by hash: .github/workflows/continuous-integration.yaml:28
Warn: downloadThenRun not pinned by hash: .github/workflows/continuous-integration.yaml:34
Warn: downloadThenRun not pinned by hash: .github/workflows/continuous-integration.yaml:37
Warn: npmCommand not pinned by hash: .github/workflows/continuous-integration.yaml:40
Info: 0 out of 7 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 0 out of 2 downloadThenRun dependencies pinned
Info: 0 out of 3 npmCommand dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

112 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-hm92-vgmw-qfmx
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-q8pj-2vqx-8ggc
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-wgrm-67xf-hhpq
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7

Score

2.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@talaikis/pdf-viewer-reactjs

Installations

Developer Guide

No

CommonJS

18.11.0

8.19.2

Pull Requests

21

31

4

6

Issues

29

87

58

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@talaikis/pdf-viewer-react

Example: Live demo is available here

How to install

Note:

Due to causing broken css issue bulma, bulma-helpers & material-design-icons are removed from dependencies and added as peerDependencies

Please install bulma, bulma-helpers & material-design-icons from npm by yourself or provide custom css as per your requirement

How to use

Documentation

Author

Ansuman Ghosh

10

10

10

7

0

0

0

0

0

0

0

0

0

2.9

/10