Skip to content

Commit

Permalink
init create-react-library@2.3.8
Browse files Browse the repository at this point in the history
  • Loading branch information
mikecousins committed Jun 12, 2018
1 parent b9b4aa3 commit b8e1200
Show file tree
Hide file tree
Showing 30 changed files with 17,463 additions and 7,615 deletions.
10 changes: 6 additions & 4 deletions .babelrc
@@ -1,10 +1,12 @@
{
"presets": [
"env",
"react",
"stage-2"
["env", {
"modules": false
}],
"stage-0",
"react"
],
"plugins": [
"transform-runtime"
"external-helpers"
]
}
5 changes: 0 additions & 5 deletions .bithoundrc

This file was deleted.

5 changes: 2 additions & 3 deletions .editorconfig
@@ -1,10 +1,9 @@
# http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
trim_trailing_whitespace = true
2 changes: 0 additions & 2 deletions .eslintignore

This file was deleted.

36 changes: 22 additions & 14 deletions .eslintrc
@@ -1,19 +1,27 @@
{
parser: "babel-eslint",
extends: "airbnb",
plugins: [
"react"
"parser": "babel-eslint",
"extends": [
"standard",
"standard-react"
],
env: {
browser: true,
mocha: true,
node: true
"env": {
"es6": true
},
rules: {
consistent-return: "warn",
no-bitwise: "off",
prefer-promise-reject-errors: "warn",
react/forbid-prop-types: "warn",
react/require-default-props: "warn"
"plugins": [
"react"
],
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
},
"rules": {
// don't force es6 functions to include space before paren
"space-before-function-paren": 0,

// allow specifying true explicitly for boolean props
"react/jsx-boolean-value": 0,

// allow imports mixed with non-import statements at top of file
"import/first": 0
}
}
24 changes: 18 additions & 6 deletions .gitignore
@@ -1,9 +1,21 @@
.idea

# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
node_modules

# builds
build
dist
lib
npm-debug.log

# misc
.DS_Store
/.idea/
/react-pdf-js.iml
yarn.lock
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
6 changes: 0 additions & 6 deletions .npmignore

This file was deleted.

8 changes: 0 additions & 8 deletions .travis.yml

This file was deleted.

21 changes: 0 additions & 21 deletions LICENSE

This file was deleted.

129 changes: 15 additions & 114 deletions README.md
@@ -1,130 +1,31 @@
# react-pdf-js
---
[![NPM Version](https://img.shields.io/npm/v/react-pdf-js.svg?style=flat-square)](https://www.npmjs.com/package/react-pdf-js)
[![NPM Downloads](https://img.shields.io/npm/dm/react-pdf-js.svg?style=flat-square)](https://www.npmjs.com/package/react-pdf-js)
[![Build Status](https://img.shields.io/travis/mikecousins/react-pdf-js/master.svg?style=flat-square)](https://travis-ci.org/mikecousins/react-pdf-js)
[![Dependency Status](https://david-dm.org/mikecousins/react-pdf-js.svg)](https://david-dm.org/mikecousins/react-pdf-js)
[![devDependency Status](https://david-dm.org/mikecousins/react-pdf-js/dev-status.svg)](https://david-dm.org/mikecousins/react-pdf-js#info=devDependencies)

`react-pdf-js` provides a component for rendering PDF documents using [PDF.js](http://mozilla.github.io/pdf.js/). Written for React 15/16 and ES2015 using the Airbnb style guide.
>
---
[![NPM](https://img.shields.io/npm/v/react-pdf-js.svg)](https://www.npmjs.com/package/react-pdf-js) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Usage
-----
## Install

Install with `npm install react-pdf-js`

Use in your app (showing some basic pagination as well):

```js
import React from 'react';
import PDF from 'react-pdf-js';

class MyPdfViewer extends React.Component {
state = {};
```bash
npm install --save react-pdf-js
```

onDocumentComplete = (pages) => {
this.setState({ page: 1, pages });
}
## Usage

onPageComplete = (page) => {
this.setState({ page });
}
```jsx
import React, { Component } from 'react'

handlePrevious = () => {
this.setState({ page: this.state.page - 1 });
}
import MyComponent from 'react-pdf-js'

handleNext = () => {
this.setState({ page: this.state.page + 1 });
}

renderPagination = (page, pages) => {
let previousButton = <li className="previous" onClick={this.handlePrevious}><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>;
if (page === 1) {
previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>;
}
let nextButton = <li className="next" onClick={this.handleNext}><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>;
if (page === pages) {
nextButton = <li className="next disabled"><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>;
}
return (
<nav>
<ul className="pager">
{previousButton}
{nextButton}
</ul>
</nav>
);
}

render() {
let pagination = null;
if (this.state.pages) {
pagination = this.renderPagination(this.state.page, this.state.pages);
}
class Example extends Component {
render () {
return (
<div>
<PDF
file="somefile.pdf"
onDocumentComplete={this.onDocumentComplete}
onPageComplete={this.onPageComplete}
page={this.state.page}
/>
{pagination}
</div>
<MyComponent />
)
}
}

module.exports = MyPdfViewer;
```

## Scaling

The PDF can be scaled in a couple of different ways.

### Stretch to fill width/height

Use the prop `fillWidth` to make the PDF stretch to the width of the parent element (generally speaking, this will be the enclosing `<div>`), or use `fillHeight` to do the same for the height of the PDF. The PDF will be scaled proportionately.

Both `fillWidth` and `fillHeight` default to `false`.

Note: `fillWidth` has precedence over `fillHeight`. So if you use both, the PDF will stretch to fill the width.

Example:

```js
<div className="parentDivWhoseWidthAndHeightAreUsedToStretchThePdf">
<PDF
file="somefile.pdf"
fillWidth
fillHeight // this will be ignored because fillWidth is also passed
/>
</div>
```

### Set scale directly

You can also set the scale manually by passing the `scale` prop. A `scale` between `0` and `1` shrinks the PDF, and a `scale` greater than `1` enlarges it.

`scale` defaults to `1`.

Note: the value of `scale` will be ignored if you also use `fillWidth` or `fillHeight`.

Example:

```js
<div>
<PDF
file="somefile.pdf"
scale={1.5}
/>
</div>
```

## Credit
## License

This project is a fork of [react-pdfjs](https://github.com/erikras/react-pdfjs) which itself was a port of [react-pdf](https://github.com/nnarhinen/react-pdf), so thank you to
the original authours.
MIT © [mikecousins](https://github.com/mikecousins)

0 comments on commit b8e1200

Please sign in to comment.