├── .circleci
├── config.yml
└── publish-and-tagging.sh
├── .github
└── workflows
│ └── github-release.yml
├── .gitignore
├── .huskyrc.json
├── .lintstagedrc
├── .node-version
├── .prettierrc
├── README.md
├── jest.config.json
├── package-lock.json
├── package.json
├── renovate.json
├── setup-test.ts
├── src
└── index.tsx
├── test
├── __snapshots__
│ └── index.test.tsx.snap
└── index.test.tsx
├── tsconfig.json
└── tslint.json
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 |
3 | references:
4 | defaults: &defaults
5 | working_directory: ~/repo
6 | nodejs: &nodejs
7 | <<: *defaults
8 | docker:
9 | - image: circleci/node:10.14.2
10 | restore_npm_cache: &restore_npm_cache
11 | name: Restore Cache - Dependency Modules
12 | keys:
13 | - v1-npm-deps-{{ checksum "package-lock.json" }}
14 | - v1-npm-deps-
15 | save_npm_cache: &save_npm_cache
16 | name: Save Cache - Dependency Modules
17 | key: v1-npm-deps-{{ checksum "package-lock.json" }}
18 | paths:
19 | - ./node_modules
20 |
21 | jobs:
22 | test:
23 | <<: *nodejs
24 | steps:
25 | - checkout
26 | - restore_cache: *restore_npm_cache
27 | - run: npm install
28 | - save_cache: *save_npm_cache
29 | - run:
30 | name: Lint
31 | command: npm run lint
32 | - run:
33 | name: Tests
34 | command: npm run test:coverage
35 | - run:
36 | name: Upload Coverage Report
37 | command: npm run coverage-report-upload
38 |
39 | build:
40 | <<: *nodejs
41 | steps:
42 | - checkout
43 | - restore_cache: *restore_npm_cache
44 | - run: npm install
45 | - save_cache: *save_npm_cache
46 | - run:
47 | name: Compile
48 | command: NODE_ENV=production npm run compile
49 | - persist_to_workspace:
50 | root: lib
51 | paths: .
52 |
53 | publish:
54 | <<: *nodejs
55 | steps:
56 | - checkout
57 | - attach_workspace:
58 | at: ~/repo/lib
59 | - run:
60 | name: Authenticate with registry
61 | command: echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" >> ~/.npmrc
62 | - add_ssh_keys:
63 | fingerprints:
64 | - "2f:7b:b4:a6:db:17:8f:7b:72:27:6b:bd:c3:de:7e:19"
65 | - run:
66 | name: Publish package to npm and tagging
67 | command: /bin/bash .circleci/publish-and-tagging.sh
68 |
69 | workflows:
70 | version: 2
71 | test_build_publish:
72 | jobs:
73 | - test
74 | - build:
75 | requires:
76 | - test
77 | - publish:
78 | requires:
79 | - build
80 | filters:
81 | branches:
82 | only: master
83 |
--------------------------------------------------------------------------------
/.circleci/publish-and-tagging.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash -eu
2 |
3 | PACKAGE_NAME=`node -p "require('./package.json').name"`
4 | NEW_VERSION=`node -p "require('./package.json').version"`
5 | LATEST_VERSION=`npm v ${PACKAGE_NAME} version 2>/dev/null || exit 0`
6 |
7 | if [[ "$LATEST_VERSION" = "$NEW_VERSION" ]]; then
8 | echo "${NEW_VERSION} exists. It was skip publishing."
9 | else
10 | npm publish
11 | TAG=v${NEW_VERSION}
12 | git tag $TAG
13 | git push origin $TAG
14 | fi
15 |
--------------------------------------------------------------------------------
/.github/workflows/github-release.yml:
--------------------------------------------------------------------------------
1 | name: GitHub Release
2 |
3 | on:
4 | push:
5 | tags:
6 | - 'v*'
7 |
8 | jobs:
9 | create-release:
10 | name: Create Release
11 | runs-on: ubuntu-20.04
12 | steps:
13 | - uses: actions/checkout@v2
14 | - name: Create Release
15 | id: create_release
16 | uses: actions/create-release@v1
17 | env:
18 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
19 | with:
20 | tag_name: ${{ github.ref }}
21 | release_name: Release ${{ github.ref }}
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log*
2 | coverage
3 | node_modules/
4 | lib
5 |
--------------------------------------------------------------------------------
/.huskyrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "hooks": {
3 | "pre-commit": "lint-staged"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/.lintstagedrc:
--------------------------------------------------------------------------------
1 | {
2 | "*.{ts,tsx}": [
3 | "prettier --write",
4 | "npm run lint:lint-staged",
5 | "git add"
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/.node-version:
--------------------------------------------------------------------------------
1 | 10.14.2
2 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 120,
3 | "singleQuote": true,
4 | "trailingComma": "all"
5 | }
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-pdfobject
2 |
3 | [![CircleCI][circleci-image]][circleci-url]
4 | [![Codecov][codecov-image]][codecov-url]
5 | [![npm version][npm-image]][npm-url]
6 | [![License][license-image]][license-url]
7 |
8 | A React component for [PDFObject](https://github.com/pipwerks/PDFObject) .
9 |
10 | ```sh
11 | npm install react-pdfobject
12 | ```
13 |
14 | ## Usage
15 |
16 | ```ts
17 | import * as React from 'react'
18 | import { PDFObject } from 'react-pdfobject'
19 |
20 |
21 | ```
22 |
23 | ## Props
24 |
25 | ```ts
26 | interface Props {
27 | url: string;
28 | containerId?: string;
29 | containerProps?: React.HTMLProps;
30 | width?: string;
31 | height?: string;
32 | page?: string | number;
33 | id?: string;
34 | fallbackLink?: string | false;
35 | pdfOpenParams?: OpenParams;
36 | PDFJS_URL?: string;
37 | forcePDFJS: boolean;
38 | assumptionMode: boolean;
39 | }
40 |
41 | export interface OpenParams {
42 | page?: number;
43 | zoom?: ZoomMode;
44 | nameddest?: string;
45 | pagemode?: PageMode;
46 | view?: ViewMode;
47 | }
48 |
49 | export type ZoomMode = 'scale' | 'scale,left,top';
50 |
51 | export type PageMode = 'bookmarks' | 'thumbs' | 'none';
52 |
53 | export type ViewMode =
54 | | 'Fit'
55 | | 'FitH'
56 | | 'FitH,top'
57 | | 'FitV'
58 | | 'FitV,left'
59 | | 'FitB'
60 | | 'FitBH'
61 | | 'FitBH,top'
62 | | 'FitBV'
63 | | 'FitBV,left';
64 | ```
65 |
66 | ## API / Static Methods Supported
67 |
68 | #### PDFObject.supportsPDFs [Function]
69 |
70 | ```ts
71 | if(PDFObject.supportsPDFs){
72 | console.log("Yay, this browser supports inline PDFs.");
73 | } else {
74 | console.log("Boo, inline PDFs are not supported by this browser");
75 | }
76 | ```
77 |
78 | #### PDFObject.pdfobjectversion [Function]
79 |
80 | ```ts
81 | console.log(PDFObject.pdfobjectversion); //"2.1.1"
82 | ```
83 |
84 | ref: https://pdfobject.com/#api
85 |
86 | ## License
87 |
88 | [MIT][license-url]
89 |
90 | © sugarshin
91 |
92 | [circleci-image]: https://circleci.com/gh/sugarshin/react-pdfobject/tree/master.svg?style=svg&circle-token=5faa6707fd0e1803cf6e01a16b6bacaba92b23b3
93 | [circleci-url]: https://circleci.com/gh/sugarshin/react-pdfobject/tree/master
94 | [codecov-image]: https://codecov.io/gh/sugarshin/react-pdfobject/branch/master/graph/badge.svg
95 | [codecov-url]: https://codecov.io/gh/sugarshin/react-pdfobject
96 | [npm-image]: https://img.shields.io/npm/v/react-pdfobject.svg?style=flat-square
97 | [npm-url]: https://www.npmjs.org/package/react-pdfobject
98 | [license-image]: https://img.shields.io/:license-mit-blue.svg?style=flat-square
99 | [license-url]: https://sugarshin.mit-license.org/
100 |
--------------------------------------------------------------------------------
/jest.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "transform": {
3 | "^.+\\.tsx?$": "ts-jest"
4 | },
5 | "testRegex": "((\\.|/)test)\\.tsx$",
6 | "moduleFileExtensions": [
7 | "ts",
8 | "tsx",
9 | "js",
10 | "jsx",
11 | "json"
12 | ],
13 | "setupTestFrameworkScriptFile": "/setup-test.ts"
14 | }
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-pdfobject",
3 | "version": "1.2.0",
4 | "description": "A React component for PDFObject",
5 | "main": "lib/index.js",
6 | "typings": "lib/index.d.ts",
7 | "files": [
8 | "lib"
9 | ],
10 | "scripts": {
11 | "test": "jest --config jest.config.json",
12 | "test:coverage": "npm test -- --coverage",
13 | "coverage-report-upload": "codecov",
14 | "clean:lib": "if [ -d lib ]; then rm -rf lib; fi",
15 | "clean": "npm run clean:lib",
16 | "precompile": "npm run clean",
17 | "compile:commonjs": "tsc --outDir lib --module commonjs",
18 | "compile": "npm run compile:commonjs",
19 | "_lint": "tslint -s node_modules/custom-tslint-formatters/formatters -t grouped",
20 | "lint": "npm run _lint -- -p tsconfig.json",
21 | "lint:fix": "npm run lint -- --fix",
22 | "lint:lint-staged": "npm run _lint -- --fix",
23 | "update-pkg-version": "npm --no-git-tag-version version",
24 | "u": "npm run update-pkg-version",
25 | "u:patch": "npm run u -- patch",
26 | "u:minor": "npm run u -- minor",
27 | "u:major": "npm run u -- major"
28 | },
29 | "repository": {
30 | "type": "git",
31 | "url": "git+https://github.com/sugarshin/react-pdfobject.git"
32 | },
33 | "keywords": [
34 | "react",
35 | "pdfobject"
36 | ],
37 | "author": "sugarshin",
38 | "license": "MIT",
39 | "bugs": {
40 | "url": "https://github.com/sugarshin/react-pdfobject/issues"
41 | },
42 | "homepage": "https://github.com/sugarshin/react-pdfobject#readme",
43 | "devDependencies": {
44 | "@types/enzyme": "3.10.13",
45 | "@types/enzyme-adapter-react-16": "1.0.6",
46 | "@types/jest": "23.3.14",
47 | "@types/pdfobject": "2.0.6",
48 | "codecov": "3.8.2",
49 | "custom-tslint-formatters": "2.4.0",
50 | "enzyme": "3.11.0",
51 | "enzyme-adapter-react-16": "1.15.7",
52 | "enzyme-to-json": "3.6.2",
53 | "husky": "1.3.1",
54 | "jest": "23.6.0",
55 | "lint-staged": "8.2.1",
56 | "prettier": "1.19.1",
57 | "react": "16.14.0",
58 | "react-dom": "16.14.0",
59 | "ts-jest": "23.10.5",
60 | "tslint": "5.20.1",
61 | "tslint-config-prettier": "1.18.0",
62 | "tslint-eslint-rules": "5.4.0",
63 | "tslint-plugin-prettier": "2.3.0",
64 | "typescript": "3.9.10"
65 | },
66 | "dependencies": {
67 | "pdfobject": "^2.1.1"
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "@sugarshin:js-lib"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/setup-test.ts:
--------------------------------------------------------------------------------
1 | import * as Enzyme from 'enzyme';
2 | import * as Adapter from 'enzyme-adapter-react-16';
3 | Enzyme.configure({ adapter: new Adapter() });
4 |
5 | Object.defineProperty(navigator, 'mimeTypes', { value: {}, writable: false });
6 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as pdfobject from 'pdfobject';
3 |
4 | export type PageMode = 'bookmarks' | 'thumbs' | 'none';
5 |
6 | export type ViewMode =
7 | | 'Fit'
8 | | 'FitH'
9 | | 'FitH,top'
10 | | 'FitV'
11 | | 'FitV,left'
12 | | 'FitB'
13 | | 'FitBH'
14 | | 'FitBH,top'
15 | | 'FitBV'
16 | | 'FitBV,left';
17 |
18 | export type ZoomMode = 'scale' | 'scale,left,top';
19 |
20 | // https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
21 | export interface OpenParams {
22 | page?: number;
23 | zoom?: ZoomMode;
24 | nameddest?: string;
25 | pagemode?: PageMode;
26 | view?: ViewMode;
27 | }
28 |
29 | export interface Props {
30 | url: string;
31 | containerId?: string;
32 | containerProps?: React.HTMLProps;
33 | width?: string;
34 | height?: string;
35 | page?: string | number;
36 | id?: string;
37 | fallbackLink?: string | false;
38 | pdfOpenParams?: OpenParams;
39 | PDFJS_URL?: string;
40 | forcePDFJS: boolean;
41 | assumptionMode: boolean;
42 | }
43 |
44 | export class PDFObject extends React.PureComponent {
45 | public static defaultProps = {
46 | width: '100%',
47 | height: '100%',
48 | containerId: 'pdfobject',
49 | forcePDFJS: false,
50 | assumptionMode: true,
51 | };
52 |
53 | public static pdfobjectversion() {
54 | return pdfobject.pdfobjectversion;
55 | }
56 |
57 | public static supportsPDFs() {
58 | return pdfobject.supportsPDFs;
59 | }
60 |
61 | public componentDidMount() {
62 | this.embed();
63 | }
64 |
65 | public componentDidUpdate(prevProps: Props) {
66 | // check for different props.url
67 | if (prevProps.url !== this.props.url) {
68 | this.embed();
69 | }
70 | }
71 |
72 | public render() {
73 | return ;
74 | }
75 |
76 | private embed = () => {
77 | const { url, containerId, containerProps, ...options } = this.props;
78 | if (pdfobject) {
79 | pdfobject.embed(url, `#${containerId}`, options);
80 | }
81 | };
82 | }
83 |
--------------------------------------------------------------------------------
/test/__snapshots__/index.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`should render self and sub-components 1`] = `
4 |
7 | `;
8 |
--------------------------------------------------------------------------------
/test/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { shallow } from 'enzyme';
2 | import toJson from 'enzyme-to-json';
3 | import * as React from 'react';
4 | import { PDFObject } from '../src';
5 |
6 | test('should render self and sub-components', () => {
7 | const tree = shallow();
8 | expect(toJson(tree)).toMatchSnapshot();
9 | });
10 |
11 | test('should return pdfobjectversion', () => {
12 | expect(PDFObject.pdfobjectversion()).toBe('2.1.1');
13 | });
14 |
15 | test('should return supportsPDFs', () => {
16 | expect(PDFObject.supportsPDFs()).toBeFalsy();
17 | });
18 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "declaration": true,
5 | "strict": true,
6 | "pretty": true,
7 | "noImplicitAny": true,
8 | "jsx": "react",
9 | "strictNullChecks": true,
10 | "strictFunctionTypes": true,
11 | "strictPropertyInitialization": true,
12 | "noImplicitThis": true,
13 | "alwaysStrict": true,
14 | "noUnusedLocals": true,
15 | "noUnusedParameters": true,
16 | "noImplicitReturns": true,
17 | "noFallthroughCasesInSwitch": true
18 | },
19 | "include": ["src/**/*.ts", "src/**/*.tsx"],
20 | "exclude": ["node_modules", "lib", "**/*.test.ts"]
21 | }
22 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "defaultSeverity": "error",
4 | "extends": [
5 | "tslint:recommended",
6 | "tslint-eslint-rules",
7 | "tslint-config-prettier"
8 | ],
9 | "rulesDirectory": ["tslint-plugin-prettier"],
10 | "rules": {
11 | "max-line-length": [true, 120],
12 | "prettier": true,
13 | "object-literal-sort-keys": false,
14 | "ordered-imports": false,
15 | "interface-name": false
16 | }
17 | }
18 |
--------------------------------------------------------------------------------