├── .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 | --------------------------------------------------------------------------------