Showing preview only (1,286K chars total). Download the full file or copy to clipboard to get everything.
Repository: diegomura/react-pdf-site
Branch: master
Commit: ea1fe9f5fd26
Files: 160
Total size: 1.2 MB
Directory structure:
gitextract_fs2i479s/
├── .babelrc.js
├── .gitignore
├── .nvmrc
├── blog/
│ └── announcing-react-pdf-v2.md
├── docs/
│ ├── advanced.md
│ ├── compatibility.md
│ ├── components.md
│ ├── debugging.md
│ ├── document-navigation.md
│ ├── dynamic-content.md
│ ├── express.md
│ ├── fonts.md
│ ├── form.md
│ ├── hooks.md
│ ├── hyphenation.md
│ ├── math.md
│ ├── node.md
│ ├── on-the-fly.md
│ ├── orphan-widow-protection.md
│ ├── page-wrapping.md
│ ├── quick-start.md
│ ├── rendering-process.md
│ ├── styling.md
│ ├── svg.md
│ └── web-workers.md
├── env-config.js
├── examples/
│ ├── breakable-unbreakable.txt
│ ├── checkbox.txt
│ ├── circle.txt
│ ├── clippath.txt
│ ├── debugging.txt
│ ├── disable-hyphenation.txt
│ ├── disable-wrapping.txt
│ ├── ellipse.txt
│ ├── emoji.txt
│ ├── fixed-components.txt
│ ├── font-register.txt
│ ├── formfield.txt
│ ├── fractals.txt
│ ├── g.txt
│ ├── hyphenation-callback.txt
│ ├── images.txt
│ ├── inline-styles.txt
│ ├── knobs.txt
│ ├── line.txt
│ ├── lineargradient.txt
│ ├── math.txt
│ ├── media-queries.txt
│ ├── mixed-styles.txt
│ ├── orphans-and-widows.txt
│ ├── page-breaks.txt
│ ├── page-numbers.txt
│ ├── page-wrap.txt
│ ├── path.txt
│ ├── picker-formlist.txt
│ ├── polygon.txt
│ ├── polyline.txt
│ ├── quick-start.txt
│ ├── radialgradient.txt
│ ├── rect.txt
│ ├── resume.txt
│ ├── styles.txt
│ ├── svg.txt
│ ├── svgtext.txt
│ ├── text.txt
│ └── textinput.txt
├── next.config.js
├── next.config_old.js
├── now.json
├── package.json
├── pages/
│ ├── _app.js
│ ├── _document.js
│ ├── advanced.js
│ ├── blog/
│ │ └── [slug].js
│ ├── compatibility.js
│ ├── components.js
│ ├── fonts.js
│ ├── form.js
│ ├── hooks.js
│ ├── index.js
│ ├── node.js
│ ├── rendering-process.js
│ ├── repl.js
│ ├── styling.js
│ └── svg.js
├── prettier.config.js
├── public/
│ ├── favicons/
│ │ ├── browserconfig.xml
│ │ └── site.webmanifest
│ ├── scripts/
│ │ └── pdf.worker.js
│ └── styles/
│ ├── codemirror.css
│ ├── fonts.css
│ ├── index.css
│ ├── prism.css
│ └── tooltips.css
└── src/
├── components/
│ ├── Docs/
│ │ ├── DebugSample/
│ │ │ ├── DebugSample.js
│ │ │ └── index.js
│ │ ├── EditButton/
│ │ │ ├── EditButton.js
│ │ │ └── index.js
│ │ ├── GoToExample/
│ │ │ ├── GoToExample.js
│ │ │ └── index.js
│ │ ├── NavigationButtons/
│ │ │ ├── NavigationButtons.js
│ │ │ └── index.js
│ │ └── OverviewTimeline/
│ │ ├── OverviewTimeline.js
│ │ └── index.js
│ ├── Layout/
│ │ ├── GitHubIcon.js
│ │ ├── Header.js
│ │ ├── Layout.js
│ │ ├── Menu.js
│ │ ├── VersionPicker.js
│ │ └── index.js
│ ├── Repl/
│ │ ├── BackButton.js
│ │ ├── Catch.js
│ │ ├── CodeEditor.js
│ │ ├── ErrorMessage.js
│ │ ├── PDFViewer.js
│ │ ├── PageNavigator.js
│ │ ├── Repl.js
│ │ ├── ReplFooter.js
│ │ ├── ReplHeader.js
│ │ └── index.js
│ └── UI/
│ ├── Blockquote/
│ │ ├── Blockquote.js
│ │ └── index.js
│ ├── Button/
│ │ ├── Button.js
│ │ └── index.js
│ ├── Clipboard/
│ │ ├── Clipboard.js
│ │ └── index.js
│ ├── CodeBlock/
│ │ ├── CodeBlock.js
│ │ └── index.js
│ ├── Heading/
│ │ ├── Heading.js
│ │ └── index.js
│ ├── Icon/
│ │ ├── Icon.js
│ │ └── index.js
│ ├── InlineCode/
│ │ ├── InlineCode.js
│ │ └── index.js
│ ├── Link/
│ │ ├── Link.js
│ │ └── index.js
│ ├── List/
│ │ ├── List.js
│ │ └── index.js
│ ├── ListItem/
│ │ ├── ListItem.js
│ │ └── index.js
│ ├── Logo/
│ │ ├── Logo.js
│ │ └── index.js
│ ├── PageBanner/
│ │ ├── PageBanner.js
│ │ └── index.js
│ ├── Paragraph/
│ │ ├── Paragraph.js
│ │ └── index.js
│ ├── Spinner/
│ │ ├── Spinner.js
│ │ └── index.js
│ ├── Table/
│ │ ├── Table.js
│ │ └── index.js
│ ├── ThematicBreak/
│ │ ├── ThematicBreak.js
│ │ └── index.js
│ └── Title/
│ ├── Title.js
│ └── index.js
├── lib/
│ ├── compress.js
│ ├── markdown.js
│ ├── toLowerCase.js
│ └── transpile.js
└── styled/
├── media.js
└── theme.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc.js
================================================
const env = require('./env-config.js')
module.exports = {
presets: ['next/babel'],
plugins: [
["prismjs", {
"languages": ["jsx", "bash"]
}],
['transform-define', env]
]
}
================================================
FILE: .gitignore
================================================
node_modules
dist
.DS_Store
.env
*.snap
.vscode
*.log
.next
================================================
FILE: .nvmrc
================================================
18
================================================
FILE: blog/announcing-react-pdf-v2.md
================================================
export const metadata = {
date: '04/06/2021',
author: 'diegomura',
title: 'Announcing react-pdf v2.0',
image: {
url: '/images/og-banner-v2.png',
width: '950',
height: '805'
}
}
I'm very excited to announce **react-pdf 2.0** to the world! This is the culmination of almost an entire year of work and all the lessons learned since this project started [all the way back in October 2016](https://github.com/diegomura/react-pdf/commit/272212a6847ad737be8241c64dbca7ad5a95ae8e). It's crazy, I feel it was just yesterday when [I was announcing 1.0 as well](https://twitter.com/diegomura/status/1070743817232494592).
In essence, this new 2.0 version is a full reimplementation of the library. Starting from scratch is always a risky move, especially when the previous version is stable and being used in production by many companies and developers. However, the more I thought about it, the more it made sense to go down this path. In this blog post, I would like to tell you about ideas behind the v2 and the problems it solves.
**TL;DR** - React-pdf 2.0 is backwards compatible with v1, so you don't need to change anything from your existing project to start using it. If you're not interested in what changed internally, you can jump straight to the [what's new](#what's-new) or the [FAQ](#faq) section.
## Motivation
### 1. Separate Layout from Rendering
Similarly to how web browsers work, react-pdf has two very distinguishable steps.
The first is **layout**, the process of computing the coordinates of each node inside the document, transforming text into glyphs, computing image sizes, and anything in between. To keep concerns separated, it's very important for the layout process to be PDF agnostic, this means, not having to deal with the underlying complexities of the PDF format.
After layout is computed, then we can move to the **rendering** phase, which is essentially drawing the nodes in the target PDF document. This step takes all the layout data for granted, it's all about dealing with PDF specific stuff, rendering borders, backgrounds, images, text, etc.
You can see the benefits of having these two steps separate right away: easier development, testing and debugging, and even having the ability to export not just PDF but any other format in the future. However, in previous react-pdf implementations there was no code separation of these concerns whatsoever. Each node was responsible for how it should layout and render, implemented in the same place. Not to mention that creating the PDF instance was the first thing we did, and it wasn't used until the very end of the entire process. This needed to change.
### 2. Embracing Immutability
One of the main causes of issues right now is dealing with the mutable nature of `react-reconciler` while having an asynchronous rendering process. The reconciler is React's piece responsible for transforming the JSX code into calls to the underlying platform you are working on. If you think about react-dom or react-native, mutability makes sense: you create native views once, and then it's all about changing those instances (e.g. changing some styling when the JSX changes). There's a state being shared in successive reconciler calls.
PDFs are different. When anything inside the document changes, we need to recompute the entire document. There's no way to just "change the color of a PDF text" and keep everything else the same.
Previous react-pdf versions dealt with this by keeping class instances in memory that knew how to clone themselves in some very complex ways, so each successive render could be "independent" from the previous one but also share these instances. Working with this, however, had become increasingly hard and was the cause of many bugs that were very difficult to track down.
Under this perspective, immutability is a must have. If I could find a way of making the renderer work with immutable structures, it would not only make bugs easier to find, but also make each render truly independent from the previous or future ones.
### 3. Performance Boost
I believe react-pdf could be much much faster than what the v1 currently is. Although it's already faster than other solutions out there, such as HTML-to-PDF for most use cases, my goal is to keep pushing this to the limit.
There are some bottlenecks we can't avoid, such as assets fetching or Yoga layout time, but there's a lot of room for improvements. The old implementation made it very difficult to both measure and improve rendering times, at least without the risk of breaking something along the way.
### 4. Better Testing
No need to explain the benefits of having extensive tests for an open-source library, especially those like react-pdf that support so many different features and CSS properties. Even though previous versions have many features tested, it was only possible to accomplish this by basically simulating an entire document from the top and seeing how it turned out to be. Doing that to test a simple margin is just too much.
## Solution
Enough talking about problems. Let's now move onto solutions.
### 1. Redefining Rendering Process
Most of the points mentioned above were only visible after having experienced how this library evolved over time, and spending a lot of time developing it and understanding what the pain points were. So I asked myself: knowing what I now know about this library, what would I've done differently? The first thing would've been rethinking the whole rendering process.
As mentioned above, splitting layout from rendering makes a lot of sense. This could be easily achieved by moving all the PDF related logic to the end of the document creation pipeline. This also has an incredibly powerful side-effect: being able to produce other types of output besides PDF documents. Suddenly, a whole world of new possibilities opened in front of our eyes.
Additionally, separating the text layout process from the rest of the pipeline turned out to be very helpful. Text layout is an incredibly complex task by itself, since it involves transforming chars into glyphs with the provided font, grouping those glyphs into lines intelligently, breaking words between lines, dealing with ligatures, orphan & widow protection, and the list goes on and on.
### 2. Functional Approach
It's not that I dislike classes, but I believe that functional programming paradigms can help a lot in breaking the whole rendering process into smaller and testable bits. Functions are generally easier to understand, since they are all about inputs and outputs. Immutability is generally very easy to enforce as well.
We were already following this approach on textkit, the library responsible for performing text layout, and the benefits were just amazing. Rarely something bad was reported about it, and it has a test coverage that with the current way of testing would've been simply impossible to achieve.
At the same time, this meant having to rewrite or at least re-organize much of the logic, which is mostly unchanged. It was daunting at first, and I was afraid of the criticism if things that worked suddenly did not. Hopefully it will pay off.
## What's New
But this new version is not just about internal changes! It also ships a lot of new features that are ready to use out of the box.
### SVG Support
React-pdf now ships with a set of new primitives to render SVG images! This has been on the backburner since the beginning of this project, postponed for several different reasons throughout the years for it being challenging to implement with the previous implementation.
And this is HUGE. Having SVG support opens this library to a whole new world of possibilities. This doesn't just mean being able to render your own SVG (such as your company logo or similar), but also building integrations with pre-existing libraries that output SVG, such as the popular chart library recharts. As a future reference, just bear in mind that react-pdf does not take the same React SVG primitives but their own, so you will need to transform from one to the other. Should be as simple as cloning elements.
You can see this working [here](http://react-pdf.org/repl?example=svg).
### New Hook API
React-pdf always tried to as simple to use as possible, without compromising flexibility and covering many different use cases. To achieve that, it ships with a `<PDFViewer />` component for those who just want to see the document in the browser, and `<BlobProvider />` and `<PDFDownloadLink />` for more complex and custom interactions. However, it felt that something was missing.
Because of that, react-pdf 2.0 introduces a `usePDF` hook to fill the remaining needs. Through it, you can access the blob, url and loading state of your document, and more importantly, have a finer control over when the document should re-render. That's something that wasn't possible before. I'm excited to see what interactions people build using this new API.
Read more about the new `usePDF` hook [here](http://react-pdf.org/hooks).
### More styles supported
Last but not least, a bunch of new CSS properties are supported, and more to come. New features include:
- Rgb, rgba and cmyk color
- Overflow
- zIndex
- Percent border radius
- Better unit support
## Acknowledges
I would like to especially thank all the people that helped accomplish such an important milestone for this library. There were more than 39 people that participated on the [2.0 pull request](https://github.com/diegomura/react-pdf/pull/617), discussing different approaches, helping testing and patiently waiting for this work to be finished. That was truly amazing and something I didn't expect when I started working on this. It's definitely not always easy to keep up with all the work this library demands, but other people's involvement in the project makes it way more enjoyable to work on.
In addition, as a reminder for anyone using or excited about this project, kindly consider [donating to react-pdf](https://opencollective.com/react-pdf). It really makes the difference, helping this project to keep moving forward.
## FAQ
### Is the new version going to be incompatible with the old one?
No! 2.0 will be backwards compatible. Because of this, there should be no reason to remain on v1. Please report any bugs to our issue tracker, preferably with a REPL link.
### Will the v1.X version still be maintained after 2.0 gets released?
Unfortunately, no. If it's just a simple change or fix, a patch to v1 will definitely be released (especially during the transition to 2.0), but no major feature will be added to it. That is mostly due to a lack of time on my end. I hope we can focus efforts on the next version, which is better in many ways.
================================================
FILE: docs/advanced.md
================================================
import EditButton from '../src/components/Docs/EditButton'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
import PageWrapping from './page-wrapping.md'
import DocumentNavigation from './document-navigation.md'
import OnTheFly from './on-the-fly.md'
import OrphanWidowProtection from './orphan-widow-protection.md'
import DynamicContent from './dynamic-content.md'
import Hyphenation from './hyphenation.md'
import Debugging from './debugging.md'
import Express from './express.md'
import WebWorkers from './web-workers.md'
import Math from './math.md'
<EditButton to="https://github.com/react-pdf/site/blob/master/docs/advanced.md" />
## Advanced
<PageWrapping components={components} />
<DocumentNavigation components={components} />
<OnTheFly components={components} />
<OrphanWidowProtection components={components} />
<DynamicContent components={components} />
<Debugging components={components} />
<Hyphenation components={components} />
<Express components={components} />
<WebWorkers components={components} />
<Math components={components} />
<NavigationButtons
backSrc="/styling"
backText="Styling"
nextSrc="/repl"
nextText="REPL"
/>
================================================
FILE: docs/compatibility.md
================================================
import EditButton from '../src/components/Docs/EditButton'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
### Compatibility with Node.js
We currently test react-pdf against Node.js 18, 20, and 21 (latest minors), so these are the versions we recommend using. Chances are you may use react-pdf with older versions of Node.js as well, but we can't guarantee it will work as expected.
### Compatibility with Bun
While we don't officially support Bun, we have received reports that it works well with react-pdf.
### Compatibility with React
`@react-pdf/renderer` is compatible with React 16 (16.8.0 or later), React 17, React 18 and React 19 (since v4.1.0)
### Compatibility with Next.js
In general, you may use react-pdf with Next.js regardless of the version. However, before Next.js 14.1.1, Next.js (App Router) suffered from a bug that caused the Next.js server to crash when using react-pdf. If you encounter:
```
TypeError: ba.Component is not a constructor
```
You should upgrade to Next.js 14.1.1 or later.
If that's not possible, update your Next.js config like this:
```js
const nextConfig = {
// …
experimental: {
// …
serverComponentsExternalPackages: ['@react-pdf/renderer'],
},
};
```
### Compatibility with esbuild
If you are using esbuild to bundle your react-pdf application in ESM mode, you may encounter an error:
```
__dirname is not defined in ES module scope
```
This is because our dependency, [Yoga layout](https://yogalayout.com/), uses `__dirname` in their code.
This will be fixed by the upcoming release of Yoga layout, but for now, you can work around this issue by using the `inject` option in esbuild.
Create a file called `cjs-shim.ts`:
```ts
import { createRequire } from 'node:module';
import path from 'node:path';
import url from 'node:url';
globalThis.require = createRequire(import.meta.url);
globalThis.__filename = url.fileURLToPath(import.meta.url);
globalThis.__dirname = path.dirname(__filename);
```
Then, add it to your `esbuild.ts`:
```ts
await esbuild.build({
// …
inject: ['cjs-shim.ts'],
});
```
And you should be good to go!
<NavigationButtons
nextSrc="/rendering-process"
nextText="Rendering process"
/>
================================================
FILE: docs/components.md
================================================
import EditButton from '../src/components/Docs/EditButton'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
<EditButton to="https://github.com/react-pdf/site/blob/master/docs/components.md" />
## Components
React-pdf follows the [React primitives](https://github.com/lelandrichardson/react-primitives) specification, making the learning process very straightforward if you come from another React environment (such as react-native). Additionally, it implements custom Component types that allow you to structure your PDF document.
### Document
This component represents the PDF document itself. It _must_ be the root of your tree element structure, and under no circumstances should it be used as child of another react-pdf component. In addition, it should only have children of type `<Page />`.
#### Valid props
| Prop name | Description | Type | Default |
|------------|:-----------------------------------------------------------------------:|------------------------------------------:|--------------:|
| title | Sets title info on the document's metadata | _String_ | _undefined_ |
| author | Sets author info on the document's metadata | _String_ | _undefined_ |
| subject | Sets subject info on the document's metadata | _String_ | _undefined_ |
| keywords | Sets keywords associated info on the document's metadata | _String_ | _undefined_ |
| creator | Sets creator info on the document's metadata | _String_ | _"react-pdf"_ |
| producer | Sets producer info on the document's metadata | _String_ | _"react-pdf"_ |
| pdfVersion | Sets PDF version for generated document | _String_ | _"1.3"_ |
| language | Sets PDF default language | _String_ | _undefined_ |
| pageMode | Specifying how the document should be displayed when opened | [PageMode](/components#pagemode-type) | _useNone_ |
| pageLayout | This controls how (some) PDF viewers choose to show pages | [PageLayout](/components#pagelayout-type) | _singlePage_ |
| creationDate | Sets the creation date on the document's metadata | _Date_ | _undefined_ |
| modificationDate | Sets the modification date on the document's metadata | _Date_ | _undefined_ |
| ownerPassword | Sets an owner password on the document. Owner password is required for setting permissions | _String_ | _undefined_ |
| userPassword | Sets a user password on the document. When set, viewers will ask for the password before opening the file | _String_ | _undefined_ |
| permissions | Defines document permissions. Requires `ownerPassword` to be set. [See more](/components#permissions-type) | [Permissions](/components#permissions-type) | _undefined_ |
| onRender | Callback after document renders. Receives document blob argument in web | _Function_ | _undefined_ |
##### PageMode type
`pageMode` prop can take one of the following values. Take into account some viewers might ignore this setting.
| Value | Description |
|----------------|:--------------------------------------------------------------------------------:|
| useNone | Neither document bookmarks nor thumbnail images visible |
| useOutlines | Document bookmarks visible |
| useThumbs | Thumbnail images visible |
| fullScreen | Full-screen mode, with no menu bar, window controls, or any other window visible |
| useOC | Optional content group panel visible |
| useAttachments | Attachments panel visible |
##### Permissions type
`permissions` prop accepts an object with the following optional boolean fields. All default to `true` when an owner password is set without specifying permissions.
| Value | Description |
|------------------------|:-------------------------------------------------------------------:|
| printing | Whether the user can print the document |
| modifying | Whether the user can modify the document |
| copying | Whether the user can copy text and images |
| annotating | Whether the user can add or modify annotations |
| fillingForms | Whether the user can fill in form fields |
| contentAccessibility | Whether content can be extracted for accessibility purposes |
| documentAssembly | Whether the user can assemble the document (insert, rotate, delete pages) |
##### PageLayout type
`pageLayout` prop can take one of the following values. Take into account some viewers might ignore this setting.
| Value | Description |
|----------------|:----------------------------------------------------------------------:|
| singlePage | Display one page at a time |
| oneColumn | Display the pages in one column |
| twoColumnLeft | Display the pages in two columns, with odd numbered pages on the left |
| twoColumnRight | Display the pages in two columns, with odd numbered pages on the right |
| twoPageLeft | Display the pages two at a time, with odd-numbered pages on the left |
| twoPageRight | Display the pages two at a time, with odd-numbered pages on the right |
---
### Page
Represents single page inside the PDF documents, or a subset of them if using the wrapping feature. A `<Document />` can contain as many pages as you want, but ensures not rendering a page inside any component besides Document.
#### Valid props
| Prop name | Description | Type | Default |
|-------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|------------------------------------------------:|-------------:|
| size | Defines page size. If _String_, must be one of the [available page sizes](https://github.com/diegomura/react-pdf/blob/master/packages/layout/src/page/getSize.ts). Height is optional, if ommited it will behave as "auto". | _String_, _Array_, _Number_, _Object_ | _"A4"_ |
| orientation | Defines page orientation. _Valid values: "portrait" or "landscape"_ | _String_ | _"portrait"_ |
| wrap | Enables page wrapping for this page. [See more](/advanced#page-wrapping) | _Boolean_ | _true_ |
| style | Defines page styles. [See more](/styling) | _Object_, _Array_ | _undefined_ |
| debug | Enables debug mode on page bounding box. [See more](/advanced#debugging) | _Boolean_ | _false_ |
| dpi | Enables setting a custom DPI for page contents. | _Number_ | _72_ |
| id | Destination ID to be linked to. [See more](/advanced#destinations) | _String_ | _undefined_ |
| bookmark | Attach bookmark to element. [See more](/advanced#bookmarks) | _String_ or [Bookmark](/advanced#bookmark-type) | _undefined_ |
---
### View
The most fundamental component for building a UI and is designed to be nested inside other views and can have 0 to many children.
#### Valid props
| Prop name | Description | Type | Default |
|-----------|:------------------------------------------------------------------------------:|------------------------------------------------:|------------:|
| wrap | Enable/disable page wrapping for element. [See more](/advanced#page-wrapping) | _Boolean_ | _true_ |
| style | Defines view styles. [See more](/styling) | _Object_, _Array_ | _undefined_ |
| render | Render dynamic content based on context. [See more](/advanced#dynamic-content) | _Function_ | _undefined_ |
| debug | Enables debug mode on view bounding box. [See more](/advanced#debugging) | _Boolean_ | _false_ |
| fixed | Render component in all wrapped pages. [See more](/advanced#page-wrapping) | _Boolean_ | _false_ |
| id | Destination ID to be linked to. [See more](/advanced#destinations) | _String_ | _undefined_ |
| bookmark | Attach bookmark to element. [See more](/advanced#bookmarks) | _String_ or [Bookmark](/advanced#bookmark-type) | _undefined_ |
---
### Image
A React component for displaying network or local (Node only) JPG or PNG images, as well as base64 encoded image strings.
#### Valid props
| Prop name | Description | Type | Default |
|-----------|:---------------------------------------------------------------------------:|------------------------------------------------:|------------:|
| src | Source of the image. [See more](/components#source-object) | _Source object_ | _undefined_ |
| source | Alias of _src_. [See more](/components#source-object) | _Source object_ | _undefined_ |
| style | Defines view styles. [See more](/styling) | _Object_, _Array_ | _undefined_ |
| debug | Enables debug mode on view bounding box. [See more](/advanced#debugging) | _Boolean_ | _false_ |
| fixed | Renders component in all wrapped pages. [See more](/advanced#page-wrapping) | _Boolean_ | _false_ |
| cache | Enables image caching between consecutive renders | _Boolean_ | _true_ |
| srcSet | Responsive image sources for resolution-based selection. E.g. `"small.jpg 300w, medium.jpg 600w"` | _String_ | _undefined_ |
| sizes | Display width used for `srcSet` source selection | _String_, _Number_ | _undefined_ |
| bookmark | Attach bookmark to element. [See more](/advanced#bookmarks) | _String_ or [Bookmark](/advanced#bookmark-type) | _undefined_ |
##### Source object
Defines the source of an image. Can be in any of these four valid forms:
| Form type | Description | Example |
|-------------|:-----------------------------------------------------------------------------------------------------------------------------------:|------------------------------------------------------------|
| String | Valid image URL or filesystem path (Node only) | `www.react-pdf.org/test.jpg` |
| URL object | Enables to pass extra parameters on how to fetch images | `{ uri: valid-url, method: 'GET', headers: {}, body: '', credentials: 'include' }` |
| Buffer | Renders image directly from Buffer. Image format (png or jpg) will be guessed based on Buffer. | `Buffer` |
| Data buffer | Renders buffer image via the _data_ key. It's also recommended to provide the image _format_ so the engine knows how to proccess it | `{ data: Buffer, format: 'png' \| 'jpg' }` |
| Function | A function that returns (can also return a promise that resolves to) any of the above formats | `() => String \| Promise<String>` |
---
### ImageBackground
A React component for displaying an image behind child content. It works like `Image` but acts as a container — any children are rendered on top of the image.
#### Valid props
| Prop name | Description | Type | Default |
|------------|:---------------------------------------------------------------------------:|------------------------------------------------:|------------:|
| src | Source of the image. [See more](/components#source-object) | _Source object_ | _undefined_ |
| source | Alias of _src_. [See more](/components#source-object) | _Source object_ | _undefined_ |
| style | Defines view styles. [See more](/styling) | _Object_, _Array_ | _undefined_ |
| imageStyle | Defines styles applied to the background image | _Object_, _Array_ | _undefined_ |
| debug | Enables debug mode on view bounding box. [See more](/advanced#debugging) | _Boolean_ | _false_ |
| fixed | Renders component in all wrapped pages. [See more](/advanced#page-wrapping) | _Boolean_ | _false_ |
| cache | Enables image caching between consecutive renders | _Boolean_ | _true_ |
| srcSet | Responsive image sources for resolution-based selection | _String_ | _undefined_ |
| sizes | Display width used for `srcSet` source selection | _String_, _Number_ | _undefined_ |
| bookmark | Attach bookmark to element. [See more](/advanced#bookmarks) | _String_ or [Bookmark](/advanced#bookmark-type) | _undefined_ |
---
### Text
A React component for displaying text. Text supports nesting of other Text or Link components to create inline styling.
#### Valid props
| Prop name | Description | Type | Default |
|---------------------|:---------------------------------------------------------------------------------------:|------------------------------------------------:|------------:|
| wrap | Enables/disables page wrapping for element. [See more](/advanced#page-wrapping) | _Boolean_ | _true_ |
| render | Renders dynamic content based on context. [See more](/advanced#dynamic-content) | _Function_ | _undefined_ |
| style | Defines view styles. [See more](/styling) | _Object_, _Array_ | _undefined_ |
| debug | Enables debug mode on view bounding box. [See more](/advanced#debugging) | _Boolean_ | _false_ |
| fixed | Renders component in all wrapped pages. [See more](/advanced#page-wrapping) | _Boolean_ | _false_ |
| hyphenationCallback | Specify hyphenation callback at a text level. See [hypthenation](/advanced#hyphenation) | _Function_ | _undefined_ |
| id | Destination ID to be linked to. [See more](/advanced#destinations) | _String_ | _undefined_ |
| bookmark | Attach bookmark to element. [See more](/advanced#bookmarks) | _String_ or [Bookmark](/advanced#bookmark-type) | _undefined_ |
---
### Link
A React component for displaying an hyperlink. Link’s can be nested inside a Text component, or being inside any other valid primitive.
#### Valid props
| Prop name | Description | Type | Default |
|-----------|:---------------------------------------------------------------------------------------------:|------------------------------------------------:|------------:|
| src | Valid URL or destination ID. ID must be prefixed with `#`. [See more](/advanced#destinations) | _String_ | _undefined_ |
| href | Alias of _src_. Valid URL for external links | _String_ | _undefined_ |
| wrap | Enable/disable page wrapping for element. [See more](/advanced#page-wrapping) | _Boolean_ | _true_ |
| style | Defines view styles. [See more](/styling) | _Object_, _Array_ | _undefined_ |
| debug | Enables debug mode on view bounding box. [See more](/advanced#debugging) | _Boolean_ | _false_ |
| fixed | Render component in all wrapped pages. [See more](/advanced#page-wrapping) | _Boolean_ | _false_ |
| hitSlop | Expands the clickable area beyond the visible bounds of the link | _Number_ or _Object_ `{ top, bottom, left, right }` | _undefined_ |
| bookmark | Attach bookmark to element. [See more](/advanced#bookmarks) | _String_ or [Bookmark](/advanced#bookmark-type) | _undefined_ |
---
### Note
A React component for displaying a note annotation inside the document.
#### Valid props
| Prop name | Description | Type | Default |
|-----------|:---------------------------------------------------------------------------:|------------------:|------------:|
| style | Defines view styles. [See more](/styling) | _Object_, _Array_ | _undefined_ |
| children | Note string content | _String_ | _undefined_ |
| fixed | Renders component in all wrapped pages. [See more](/advanced#page-wrapping) | _Boolean_ | _false_ |
---
### Canvas
A React component for freely drawing any content on the page.
#### Valid props
| Prop name | Description | Type | Default |
|-----------|:---------------------------------------------------------------------------:|------------------------------------------------:|------------:|
| style | Defines view styles. [See more](/styling) | _Object_, _Array_ | _undefined_ |
| paint | Painter function | _Function_ | _undefined_ |
| debug | Enables debug mode on view bounding box. [See more](/advanced#debugging) | _Boolean_ | _false_ |
| fixed | Renders component in all wrapped pages. [See more](/advanced#page-wrapping) | _Boolean_ | _false_ |
| bookmark | Attach bookmark to element. [See more](/advanced#bookmarks) | _String_ or [Bookmark](/advanced#bookmark-type) | _undefined_ |
React-pdf does not check how much space your drawing takes, so make sure you always define a `width` and `height` on the `style` prop.
##### Painter function
Prop used to perform drawings inside the Canvas. It takes 3 arguments:
- `Painter object`: Wrapper around _pdfkit_ drawing methods. Use this to draw inside the Canvas
- `availableWidth`: Width of the Canvas element.
- `availableHeight`: Height of the Canvas element.
##### Painter object
Wrapper around _pdfkit_ methods you can use to draw inside the Canvas. All operations are chainable. For more information about how these methods work, please refer to [pdfkit documentation](http://pdfkit.org/).
Available methods:
- dash
- clip
- save
- path
- fill
- font
- text
- rect
- scale
- moveTo
- lineTo
- stroke
- rotate
- circle
- lineCap
- opacity
- ellipse
- polygon
- restore
- lineJoin
- fontSize
- fillColor
- lineWidth
- translate
- miterLimit
- strokeColor
- fillOpacity
- roundedRect
- strokeOpacity
- bezierCurveTo
- quadraticCurveTo
- linearGradient
- radialGradient
---
### PDFViewer `Web only`
Iframe PDF viewer for client-side generated documents.
#### Valid props
| Prop name | Description | Type | Default |
|-------------|:--------------------------------------------------------:|-------------------:|------------:|
| style | Defines iframe styles | _Object_, _Array_ | _undefined_ |
| className | Defines iframe class name | _String _ | _undefined_ |
| children | PDF document implementation | _Document_ | _undefined_ |
| width | Width of embedded PDF iframe | _String_, _Number_ | _undefined_ |
| height | Height of embedded PDF iframe | _String_, _Number_ | _undefined_ |
| innerRef | Ref to the underlying iframe element | _Ref_ | _undefined_ |
| showToolbar | Render the toolbar. Supported on Chrome, Edge and Safari | _Boolean_ | _true_ |
Other props are passed through to the iframe.
---
### PDFDownloadLink `Web only`
Anchor tag to enable generate and download PDF documents on the fly.
Refer to [on the fly rendering](/advanced#on-the-fly-rendering) for more information.
#### Valid props
| Prop name | Description | Type | Default |
|-----------|:-----------------------------:|-----------------------:|------------:|
| document | PDF document implementation | _Document_ | _undefined_ |
| fileName | Download PDF file name | _String_ | _undefined_ |
| style | Defines anchor tag styles | _Object_, _Array_ | _undefined_ |
| className | Defines anchor tag class name | _String_ | _undefined_ |
| children | Anchor tag content | _DOM node_, _Function_ | _undefined_ |
| onClick | Click handler. Receives click event and PDF instance as arguments | _Function_ | _undefined_ |
---
### BlobProvider `Web only`
Easy and declarative way of getting document's blob data without showing it on screen.
Refer to [on the fly rendering](/advanced#on-the-fly-rendering) for more information.
#### Valid props
| Prop name | Description | Type | Default |
|-----------|:----------------------------------------------------------------:|-----------:|------------:|
| document | PDF document implementation | _Document_ | _undefined_ |
| children | Render prop with blob, url, error and loading state as arguments | _Function_ | _undefined_ |
---
<NavigationButtons
backSrc="/rendering-process"
backText="Rendering process"
nextSrc="/svg"
nextText="SVG"
/>
================================================
FILE: docs/debugging.md
================================================
import DebugSample from '../src/components/Docs/DebugSample'
import GoToExample from '../src/components/Docs/GoToExample'
### Debugging
React-pdf ships a built-in debugging system you can use whenever you have doubts about how elements are being laid out on the page. All you have to do is to set the `debug` prop to `true` on any valid primitive (except _Document_) and re-render the document to see the result on the screen.
<DebugSample />
<GoToExample name="debugging" />
---
================================================
FILE: docs/document-navigation.md
================================================
### Document Navigation
There are two main ways to make a document navigable:
#### Destinations `v2.0.0`
Destinations are the simplest form of navigation. They allow to create interactive links that take the user directly to the defined place within the document.
A destination can be created by setting the `id` prop to a _String_ on any supported element ([see more](/components)). After that, the destination can be linked to by setting the `src` prop on the `<Link />` element to the same _String_, but with the leading hash (`#`) symbol:
```js
import { Document, Link, Page, Text } from '@react-pdf/renderer'
const doc = () => (
<Document>
<Page>
<Link src='#Footnote'> // Notice the hash symbol
Click me to get to the footnote
</Link>
// Other content here
<Text id='Footnote'> // No hash symbol
You are here because you clicked the link above
</Text>
</Page>
</Document>
);
```
#### Bookmarks `v2.2.0`
Bookmarks allow the user to navigate interactively from one part of the document to another. They form a tree-structured hierarchy of items, which serve as a visual table of contents to display the document’s structure to the user.
A bookmark can be defined by the `bookmark` prop on any of the supported components ([see more](/components)), and can take the form of either a _String_ or a _Bookmark_ type
```js
import { Document, Page, Text } from '@react-pdf/renderer'
const doc = () => (
<Document>
<Page bookmark="Harry Potter and the Philosopher's Stone">
<Text bookmark={{ title: "Chapter 1: The Boy Who Lived", fit: true }}>{...}</Text>
</Page>
</Document>
);
```
The example above will create a table of content of 2 nested items: The parent will be the book's name, and the child the chapter's name. You can nest as many bookmarks as you want.
Note that some older PDF viewers may not support bookmarks.
##### Bookmark type
Object that matches the following schema:
| Value | Description | Type |
|-----------------------|:-----------------------------------------------------------------------------------:|----------:|
| title | Bookmark value | _String_ |
| top _(Optional)_ | Y coodinate from the document top edge where user get's redirected. Defaults to 0 | _Number_ |
| left _(Optional)_ | X coodinate from the document top edge where user get's redirected. Defaults to 0 | _Number_ |
| zoom _(Optional)_ | Reader zoom value after clicking on the bookmark | _Number_ |
| fit _(Optional)_ | Redirect user to the start of the page | _Boolean_ |
| expanded _(Optional)_ | Viewer should expand tree node in table of contents (not supported in some viewers) | _Boolean_ |
---
================================================
FILE: docs/dynamic-content.md
================================================
import GoToExample from '../src/components/Docs/GoToExample'
### Dynamic content
With react-pdf, now it is possible to render dynamic text based on the context in which a certain element is being rendered. All you have to do is to pass a function to the `render` prop of the `<Text />` or `<View />` component. The result will be rendered inside the text block as a child.
```
import { Document, Page } from '@react-pdf/renderer'
const doc = () => (
<Document>
<Page wrap>
<Text render={({ pageNumber, totalPages }) => (
`${pageNumber} / ${totalPages}`
)} fixed />
<View render={({ pageNumber }) => (
pageNumber % 2 === 0 && (
<View style={{ background: 'red' }}>
<Text>I'm only visible in odd pages!</Text>
</View>
)
)} />
</Page>
</Document>
);
```
#### Available arguments
| Name | Description | Type |
| ---------------------- | :-----------------------------------------: | --------: |
| pageNumber | Current page number | _Integer_ |
| totalPages `Text only` | Total amount of pages in the final document | _Integer_ |
| subPageNumber | Current subpage in the Page component | _Integer_ |
| subPageTotalPages `Text only` | Total amount of pages in the Page component | _Integer_ |
Bear in mind that the `render` function is called twice for `<Text />` elements: once for layout on the page wrapping process, and another one after it's know how many pages the document will have.
> **Protip:** Use this API in conjunction with fixed elements to render page number indicators
<GoToExample name="page-numbers" />
---
================================================
FILE: docs/express.md
================================================
### Usage with Express.js `node only`
```jsx
import React from 'react';
import ReactPDF from '@react-pdf/renderer';
const pdfStream = await ReactPDF.renderToStream(<MyDocument />);
res.setHeader('Content-Type', 'application/pdf');
pdfStream.pipe(res);
pdfStream.on('end', () => console.log('Done streaming, response sent.'));
```
================================================
FILE: docs/fonts.md
================================================
import EditButton from '../src/components/Docs/EditButton'
import GoToExample from '../src/components/Docs/GoToExample'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
<EditButton to="https://github.com/react-pdf/site/blob/master/docs/fonts.md" />
## Fonts
React-pdf is shipped with a `Font` module that enables to load fonts from different sources, handle how words are wrapped and defined an emoji source to embed these glyphs on your document.
You can define multiple sources for the same font family, each with a different `fontStyle` or `fontWeight`. React-pdf will pick the appropriate font for each `<Text />` based on its style and the registered fonts.
Currently,
- [only TTF and WOFF fonts files are supported](https://github.com/diegomura/react-pdf/issues/334). A list of available TTF fonts from Google can be found [here](https://gist.github.com/sadikay/d5457c52e7fb2347077f5b0fe5ba9300).
- Any OpenType Variable fonts (such as Noto Sans variable weights font) does not work properly because PDF 2.0 spec does not support those. It is required to register separate fonts using 'fonts' property (explained in below).
```
import { StyleSheet, Font } from '@react-pdf/renderer'
// Register font
Font.register({ family: 'Roboto', src: source });
// Reference font
const styles = StyleSheet.create({
title: {
fontFamily: 'Roboto'
}
})
```
---
### `register`
Fonts really make the difference when it comes on styling a document. For obvious reasons, react-pdf cannot ship a wide amount of them. Here's a list of available font families that are supported out of the box:
- `Courier`
- `Courier-Bold`
- `Courier-Oblique`
- `Courier-BoldOblique`
- `Helvetica`
- `Helvetica-Bold`
- `Helvetica-Oblique`
- `Helvetica-BoldOblique`
- `Times-Roman`
- `Times-Bold`
- `Times-Italic`
- `Times-BoldItalic`
In case you want to use a different font, you may load additional font files from many different sources via the `register` method very easily.
```
import { Font } from '@react-pdf/renderer'
Font.register({ family: 'FamilyName', src: source, fontStyle: 'normal', fontWeight: 'normal', fonts?: [] });
```
#### source
Specifies the source of the font. This can either be a valid URL, or an absolute path if you're using react-pdf on Node.
#### family
Name to which the font will be referenced on styles definition. Can be any unique valid string
#### fontStyle
Specifies to which font style the registered font refers to.
| Value | Description |
| ------- | :------------------------------------------------------------------------------------------------------------------------------------------------------ |
| normal | Selects a font that is classified as normal _Default_ |
| italic | Selects a font that is classified as italic. If no italic version of the font is registered, react-pdf will fail when a style of this type is present |
| oblique | Selects a font that is classified as oblique. If no oblique version of the font is registered, react-pdf will fail when a style of this type is present |
#### fontWeight
Specifies the registered font weight.
| Value | Description |
| ---------- | :----------------------------------- |
| thin | Equals to value 100 |
| ultralight | Equals to value 200 |
| light | Equals to value 300 |
| normal | Equals to value 400 _Default_ |
| medium | Equals to value 500 |
| semibold | Equals to value 600 |
| bold | Equals to value 700 |
| ultrabold | Equals to value 800 |
| heavy | Equals to value 900 |
| _number_ | Any integer value between 0 and 1000 |
When the exact font weight is not registered for a given text, react-pdf will fallback to the nearest registered weight in the same way browsers do. More information [here](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Fallback_weights)
<GoToExample name="font-register" />
#### fonts
In many cases you will end up registering multiple sources for the same font family (each with different font-style and font-weight for instance). As an alternative of calling `Font.register` for each of this, you can use the `fonts` attribute to register them all at once:
```
Font.register({ family: 'Roboto', fonts: [
{ src: source1 }, // font-style: normal, font-weight: normal
{ src: source2, fontStyle: 'italic' },
{ src: source3, fontStyle: 'italic', fontWeight: 700 },
]});
```
---
### `registerHyphenationCallback`
Enables you to have fine-grained control over how words break, passing your own callback and handle all that logic for yourself:
```
import { Font } from '@react-pdf/renderer'
const hyphenationCallback = (word) => {
// Return word parts in an array
}
Font.registerHyphenationCallback(hyphenationCallback);
```
<GoToExample name="hyphenation-callback" />
#### Disabling hyphenation
You can easily disable word hyphenation by just returning the same word as it is passed to the hyphenation callback
```
Font.registerHyphenationCallback(word => [word]);
```
<GoToExample name="disable-hyphenation" />
---
### `registerEmojiSource`
PDF documents do not support color emoji fonts. This is a bummer for the ones out there who love their expressiveness and simplicity. The only way of rendering this glyphs on a PDF document, is by embedding them as images.
React-pdf makes this task simple by enabling you to use a CDN from where to download emoji images. All you have to do is setup a valid URL (we recommend using [Twemoji](https://github.com/twitter/twemoji) for this task), and react-pdf will take care of the rest:
```
import { Font } from '@react-pdf/renderer'
Font.registerEmojiSource({
format: 'png',
url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/',
});
```
> **Protip:** react-pdf will need a internet connection to download emoji's images at render time, so bare that in mind when choosing to use this API
<GoToExample name="emoji" />
<NavigationButtons
backSrc="/styling"
backText="Styling"
nextSrc="/node"
nextText="Node API"
/>
================================================
FILE: docs/form.md
================================================
import EditButton from '../src/components/Docs/EditButton'
import GoToExample from '../src/components/Docs/GoToExample'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
<EditButton to="https://github.com/react-pdf/site/blob/master/docs/form.md" />
## Forms
React-pdf includes the ability to use [AcroForm](https://experienceleague.adobe.com/en/docs/experience-manager-learn/forms/document-services/pdf-forms-and-documents#acroforms)-Forms in pdfs. AcroForm is part of interactive pdfs and includes annotations for e.g. text fields, checkboxes. The AcroForm is automatically initialized as soon as one of the form elements is used.
### TextInput
The `<TextInput />` element represents a text field for inputting single- or multiline text.
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :----------------------------------------------------------------: | ------------------------------------------: | ----------: |
| align | Defines the alignment of text | _String_ | _left_ |
| multiline | Defines if the user is allowed to input more than one line of text | _Boolean_ | _false_ |
| password | If set to true the text will be masked with e. g. * | _Boolean_ | _false_ |
| noSpell | If set to true tells the pdf viewer to not spellcheck the text | _Boolean_ | _false_ |
| format | Defines the format the textinput should be formatted to | [TextInputFormatting](#textinputformatting) | _undefined_ |
| fontSize | Defines the font size for the text input. Set to `0` for auto-size | _Number_ | _undefined_ |
| maxLength | Defines the maximum number of characters | _Number_ | _undefined_ |
See also [Common Form Attributes](#common-form-attributes)
<GoToExample name="textinput" />
##### TextInputFormatting
`format` is a definition how the value shall be formatted by the viewer. Take into account that not all viewers support this feature because it involves javascript execution.
| Prop name | Description | Type | Default |
| --------------- | :--------------------------------------------------: | ------------------------------------------: | ----------: |
| type | Defines the alignment of text | [TextInputFormatType](#textinputformattype) | _undefined_ |
| param | Defines a format for certain types | _String_ | _undefined_ |
| nDec | Defines the number of places after the decimal point | _Number_ | _undefined_ |
| sepComma | Defines if the seperator shall be a comma or not | _Boolean_ | _false_ |
| negStyle | Defines style for negative numbers | _String_ | _undefined_ |
| currency | Defines the symbol to be placed as currency sign | _String_ | _undefined_ |
| currencyPrepend | If set to true the currency sign is prepended | _Boolean_ | _false_ |
##### TextInputFormatType
`type` prop can take one of the following values.
| Value | Description |
| -------- | :-----------------------------------------------------------------: |
| date | Expects the param prop to be a valid date format. |
| time | Expects the param prop to be a valid time format. |
| percent | Uses the props nDec, sepComma, negStyle, currency, currencyPrepend. |
| number | Uses the props nDec, sepComma, negStyle, currency, currencyPrepend. |
| zip | Formats for the zip-code standard |
| zipPlus4 | Formats for the zip+4 standard |
| phone | Formats for a phone number |
| ssn | Formats for a ssn number |
For deeper knowledge into the formatting you might want to look into the [pdfkit doc](https://pdfkit.org/docs/forms.html#text_field_formatting) and into the [API Reference for Forms](https://experienceleague.adobe.com/docs/experience-manager-learn/assets/FormsAPIReference.pdf) Page 119.
---
### Checkbox
The `<Checkbox />` element represents one of two states the user can toggle between. Some viewers behave differently based on wether the `name` prop is set or not and wether there are name duplicates or not. This can result in inconsistencies which makes the `name` prop recommendable to use and to achieve a consistent result across various viewers.
#### Valid props
| Prop name | Description | Type | Default |
| --------------- | :--------------------------------------------------------------------------: | --------: | ----------: |
| backGroundColor | It defines the color of the inside of the checkbox it applies to | _String_ | _undefined_ |
| borderColor | Defines the color used to paint the outline of the checkbox | _String_ | _undefined_ |
| checked | If set to true the checkbox is checked | _Boolean_ | _false_ |
| onState | If set to true tells the pdf viewer to not spellcheck the text | _String_ | _Yes_ |
| offState | Defines the format the textinput should be formatted to | _String_ | _No_ |
| xMark | If set to true the onState appears as a X otherwise a checkmark is displayed | _Boolean_ | _false_ |
See also [Common Form Attributes](#common-form-attributes)
<GoToExample name="checkbox" />
---
### Select
The `<Select />` element represents a dropdown menu for the selection of predefined options.
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :---------------------------------------------------------------------------------------: | --------: | ------: |
| edit | If set to true allows the user to enter a value in the field | _Boolean_ | _false_ |
| noSpell | If set to true and edit is set to true it tells the pdf viewer to not spellcheck the text | _Boolean_ | _false_ |
For more attributes head to [Select and List Attributes](#select-and-list-attributes).
<GoToExample name="picker-formlist" />
---
### List
The `<List />` element represents a scrollable list for the selection of predefined options.
#### Valid props
For attributes head to [Select and List Attributes](#select-and-list-attributes).
<GoToExample name="picker-formlist" />
---
### Select and List Attributes
These attributes are shared by the Select and List elements.
#### Valid props
| Prop name | Description | Type | Default |
| ----------- | :-----------------------------------------------------------: | ---------: | ------: |
| sort | Defines if the options shall be sorted alphabetically | _Boolean_ | _false_ |
| multiSelect | If set to true the user is allowed to select multiple options | _Boolean_ | _false_ |
| select | Defines the options to show inside the field as an array | _String[]_ | _[]_ |
See also [Common Form Attributes](#common-form-attributes)
---
### FieldSet
The `<FieldSet />` element is used to group other form elements together. On the form level this creates a hierarchical structure most important for data extraction and naming clearance. It is fully invisible. The usage of this element is optional and not required by any other element. Because of not being an element on its own the FieldSet is the only element not sharing the common form attributes.
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :------------------------: | -------: | ----------: |
| name | The name of the FieldSet | _String_ | _undefined_ |
<GoToExample name="formfield" />
---
### Common Form Attributes
Common form attributes are attributes that are shared by a variety of elements.
#### Supported attributes
| Prop name | Description | Type | Default |
| ------------ | :----------------------------------------------------------------------------------------------------: | -----------------: | ----------: |
| name | Describes the name of the specific element when submitting the form | _String_ | _empty_ |
| required | Describes if the specific element needs to have a value when submitting the form | _Boolean_ | _false_ |
| noExport | If set to true the specific element is not exported at a form submission | _Boolean_ | _false_ |
| readOnly | Defines if the specific element is editable or not. If set to true, the user shall not edit the value. | _Boolean_ | _false_ |
| value | Defines the value of the specific element. For further information look at the element. | _String_, _Number_ | _undefined_ |
| defaultValue | Describes what the default state for the value is. Can be used when resetting the form. | _String_, _Number_ | _undefined_ |
<NavigationButtons
backSrc="/svg"
backText="SVG Images"
nextSrc="/hooks"
nextText="Hooks"
/>
================================================
FILE: docs/hooks.md
================================================
import EditButton from '../src/components/Docs/EditButton'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
<EditButton to="https://github.com/react-pdf/site/blob/master/docs/hooks.md" />
## Hooks
### usePDF `Web only`
React-pdf now ships a hook called `usePDF` that enables accessing all PDF creation capabilities via a React hook API. This is great if you need more control over how the document gets rendered or how often it's updated.
#### Usage
```js
const [instance, update] = usePDF({ document });
```
#### Parameters
| Prop name | Description | Default |
| --------- | :---------------------: | ----------- |
| document | Document's root element | _undefined_ |
#### Instance object
| Prop name | Description | Default |
| --------- | :---------------------------------------------------------: | ----------- |
| url | Rendered document blog url. Null if loading or errored | _undefined_ |
| blob | Rendered document blob instance. Null if loading or errored | _undefined_ |
| loading | Loading state. It's true if current render is in place | _false_ |
| error | Error message if rendering failed | _undefined_ |
#### Update function
Used to trigger a document re-render. By default, changing the document instance does not triggers a new PDF file creation. This is especially helpful when rendering a download button or something similar, where you might want to render the document right before the action gets triggered.
The update function takes the new document and does not return anything.
> For more information about how this hook is used please refer to the [Using the usePDF hook](/advanced#using-the-usepdf-hook) section
---
<NavigationButtons
backSrc="/form"
backText="Forms"
nextSrc="/styling"
nextText="Styling"
/>
================================================
FILE: docs/hyphenation.md
================================================
import GoToExample from '../src/components/Docs/GoToExample'
### Hyphenation
Hyphenation refers to the automated process of breaking words between lines to create a better visual consistency across a text block. This is a complex problem. It involves knowing about the language of the text, available space, ligatures, among other things.
React-pdf internally implements the [Knuth and Plass line breaking algorithm](http://www.eprg.org/G53DOC/pdfs/knuth-plass-breaking.pdf) that produces the minimum amount of lines without compromising text legibility. By default it's setup to hyphenate english words.
If you need more fine-grained control over how words break, you can pass your own callback and handle all that logic by yourself:
```
import { Font } from '@react-pdf/renderer'
const hyphenationCallback = (word) => {
// Return word syllables in an array
}
Font.registerHyphenationCallback(hyphenationCallback);
```
You can use the [default hyphenation callback](https://github.com/diegomura/react-pdf/blob/master/packages/textkit/src/engines/wordHyphenation/index.ts) as a starting point.
Example of a custom implementation (German):
```
import { Font } from "@react-pdf/renderer";
import { hyphenateSync as hyphenateDE } from "hyphen/de";
const hyphenationCallback = (word) => {
return hyphenateDE(word).split("\u00AD");
};
Font.registerHyphenationCallback(hyphenationCallback);
```
> **Protip:** If you don't want to hyphenate words at all, just provide a callback that returns the same words it receives. More information [here](/fonts#registerhyphenationcallback)
<GoToExample name="hyphenation-callback" />
================================================
FILE: docs/math.md
================================================
import GoToExample from '../src/components/Docs/GoToExample'
### Math expressions
React-pdf supports rendering LaTeX mathematical expressions via the `@react-pdf/math` package. It converts LaTeX notation into vector graphics (SVG paths), so all glyphs are fully embedded in the PDF without external fonts or assets.
#### Installation
```bash
npm install @react-pdf/math
```
#### Usage
```jsx
import { Document, Page, Text, View } from '@react-pdf/renderer';
import { Math } from '@react-pdf/math';
const MyDocument = () => (
<Document>
<Page size="A4" style={{ padding: 40 }}>
<Math>{"x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}"}</Math>
</Page>
</Document>
);
```
#### Inline mode
By default, expressions render in display mode (centered, larger). Set `inline` to render compact equations suitable for embedding alongside text:
```jsx
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text>The equation </Text>
<Math inline height={12}>{"E = mc^2"}</Math>
<Text> is famous.</Text>
</View>
```
<GoToExample name="math" />
#### Valid props
| Prop name | Description | Type | Default |
|-----------|:---------------------------------------------------------------------------:|-------------------:|------------:|
| children | LaTeX math expression to render | _String_ | _undefined_ |
| inline | Inline mode (compact) vs display mode (centered, larger) | _Boolean_ | _false_ |
| width | Width of the rendered expression. Auto-calculated from aspect ratio if omitted | _Number_, _String_ | _undefined_ |
| height | Height of the rendered expression. Defaults to 22 if omitted | _Number_, _String_ | _22_ |
| color | Color of the math expression | _String_ | _"black"_ |
| debug | Enables debug mode showing a border around the expression | _Boolean_ | _false_ |
#### Supported LaTeX features
All standard LaTeX math features supported by MathJax are available, including:
- Fractions, roots, and arithmetic operators
- Greek and Hebrew letters
- Summations, products, and integrals
- Limits and derivatives
- Matrices and arrays
- Binomial coefficients
- Trigonometric functions
- Accents and decorations
- Piecewise functions and aligned equations
---
================================================
FILE: docs/node.md
================================================
import EditButton from '../src/components/Docs/EditButton'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
<EditButton to="https://github.com/react-pdf/site/blob/master/docs/node.md" />
## Node API
### renderToFile
Helper function to render a PDF into a file.
#### Usage
```js
const MyDocument = () => (
<Document>
<Page>
<Text>React-pdf</Text>
</Page>
</Document>
);
await renderToFile(<MyDocument />, `${__dirname}/my-doc.pdf`);
```
#### Arguments
| Prop name | Description | Default |
| --------- | :-------------------------------------------------: | ----------- |
| document | Document's root element to be rendered | _undefined_ |
| path | File system path where the document will be created | _undefined_ |
| callback | Function to be called after rendering is finished | _undefined_ |
### renderToString
Helper function to render a PDF into a string.
#### Usage
```js
const MyDocument = () => (
<Document>
<Page>
<Text>React-pdf</Text>
</Page>
</Document>
);
const value = await renderToString(<MyDocument />);
```
#### Arguments
| Prop name | Description | Default |
| --------- | :------------------------------------: | ----------- |
| document | Document's root element to be rendered | _undefined_ |
#### Returns
String representation of PDF document
### renderToBuffer
Helper function to render a PDF into a Node Buffer.
#### Usage
```js
const MyDocument = () => (
<Document>
<Page>
<Text>React-pdf</Text>
</Page>
</Document>
);
const buffer = await renderToBuffer(<MyDocument />);
```
#### Arguments
| Prop name | Description | Default |
| --------- | :------------------------------------: | ----------- |
| document | Document's root element to be rendered | _undefined_ |
#### Returns
Buffer representation of PDF document
### renderToStream
Helper function to render a PDF into a Node Stream.
#### Usage
```js
const MyDocument = () => (
<Document>
<Page>
<Text>React-pdf</Text>
</Page>
</Document>
);
const stream = await renderToStream(<MyDocument />);
```
#### Arguments
| Prop name | Description | Default |
| --------- | :------------------------------------: | ----------- |
| document | Document's root element to be rendered | _undefined_ |
#### Returns
PDF document Stream
<NavigationButtons
backSrc="/fonts"
backText="Fonts"
nextSrc="/advanced"
nextText="Advanced"
/>
================================================
FILE: docs/on-the-fly.md
================================================
### On the fly rendering `Web only`
There are some cases in which you may need to generate a document without showing it on screen. For those scenarios, react-pdf provides three different solutions:
#### Download link
Is it possible that what you need is just a "Download" button. If that's the case, you can use `<PDFDownloadLink />` to easily create and download your document.
```jsx
import { PDFDownloadLink, Document, Page } from '@react-pdf/renderer';
const MyDoc = () => (
<Document>
<Page>
// My document data
</Page>
</Document>
);
const App = () => (
<div>
<PDFDownloadLink document={<MyDoc />} fileName="somename.pdf">
{({ blob, url, loading, error }) =>
loading ? 'Loading document...' : 'Download now!'
}
</PDFDownloadLink>
</div>
);
```
> **Protip:** You still have access to blob's data if you need it.
#### Access blob data
However, react-pdf does not stick to just download the document but also enables direct access to the document's blob data for any other possible use case. All you have to do is make use of `<BlobProvider />`.
```jsx
import { BlobProvider, Document, Page } from '@react-pdf/renderer';
const MyDoc = (
<Document>
<Page>
// My document data
</Page>
</Document>
);
const App = () => (
<div>
<BlobProvider document={MyDoc}>
{({ blob, url, loading, error }) => {
// Do whatever you need with blob here
return <div>There's something going on on the fly</div>;
}}
</BlobProvider>
</div>
);
```
You can also obtain the blob data imperatively, which may be useful if you are using react-pdf on a non-React frontend (web only).
```jsx
import { pdf, Document, Page } from '@react-pdf/renderer';
const MyDoc = (
<Document>
<Page>
// My document data
</Page>
</Document>
);
const blob = pdf(MyDoc).toBlob();
```
#### Using the usePDF hook
React-pdf now ships a hook API that will give you direct access to the document data (such as blob or url state) as well as with an _update_ function to trigger document re-rendering. Since document re-computation can be an expensive operation, this hook is perfect solution for those cases in where you need a fine control over when this happens.
```js
import { usePDF, Document, Page } from '@react-pdf/renderer';
const MyDoc = (
<Document>
<Page>
// My document data
</Page>
</Document>
);
const App = () => {
const [instance, updateInstance] = usePDF({ document: MyDoc });
if (instance.loading) return <div>Loading ...</div>;
if (instance.error) return <div>Something went wrong: {instance.error}</div>;
return (
<a href={instance.url} download="test.pdf">
Download
</a>
);
}
```
> **Protip:** You still have access to blob's data inside `instance.blob` if you need it
---
================================================
FILE: docs/orphan-widow-protection.md
================================================
import GoToExample from '../src/components/Docs/GoToExample'
### Orphan & widow protection
When you layout text, orphans and widows can make the difference between a _good_ document and a _great_ one. That's why react-pdf has a built-in orphan and widow protection that you can use right out of the box.
But react-pdf does not reserve this protection just for text. You can adjust this protection to your convenience by just setting some props to **any react-pdf primitive**:
| Prop name | Description | Type | Default |
| --------------------- | :------------------------------------------------------------------------------------------------------------------: | --------: | ------: |
| minPresenceAhead | Hint that no page wrapping should occur between all sibling elements following the element within _n_ points | _Integer_ | 0 |
| orphans _(text only)_ | Specifies the minimum number of lines in a text element that must be shown at the bottom of a page or its container. | _Integer_ | 2 |
| widows _(text only)_ | Specifies the minimum number of lines in a text element that must be shown at the top of a page or its container. | _Integer_ | 2 |
> **Protip:** You can use this API to ensure that headings do not get rendered at the bottom of a page
<GoToExample name="orphans-and-widows" />
---
================================================
FILE: docs/page-wrapping.md
================================================
import GoToExample from '../src/components/Docs/GoToExample'
### Page wrapping
Semantically, the `<Page />` component represents a single page in the rendered document. However, there are scenarios in which you would expect to have page breaks whenever the page contents exceed their limits, specially when handling big chunks of text. After all, PDFs are paged documents. React-pdf has a built-in wrapping engine that is enabled by default, so you can start creating paged documents right out of the box. If that's not what you need, you can disable this very easily by doing:
```
import { Document, Page } from '@react-pdf/renderer'
const doc = () => (
<Document>
<Page wrap={false}>
// something pretty here
</Page>
</Document>
);
```
<GoToExample name="page-wrap" />
#### Breakable vs. unbreakable components
We can identify two different types of components based on how they wrap:
- `Breakable components` try to fill up the remaining space before jumping into a new page. By default, this group is composed by _View_, _Text_ and _Link_ components
- `Unbreakable components` are indivisible, therefore if there isn't enough space for them they just get rendered in the following page. In this group by default we only find _Image_.
<GoToExample name="breakable-unbreakable" />
#### Disabling component wrapping
React-pdf also enables you to transform _breakable_ elements into their opposite, forcing them to always render in a new page. This can be done by simply setting the prop `wrap={false}` to any valid component:
```
import { Document, Page, View } from '@react-pdf/renderer'
const doc = () => (
<Document>
<Page wrap>
<View wrap={false}>
// fancy things here
</View>
</Page>
</Document>
);
```
Now, if the `<View />` component happens to be at the bottom of the page without enough space, it will be rendered in a new page as it would be _unbreakable_.
<GoToExample name="disable-wrapping" />
#### Page breaks
Page breaks are useful for separating concerns inside the document, or ensuring that a certain element will always show up on the top of the page.
Adding page breaks in react-pdf is very simple: all you have to do is add the `break` prop to any primitive. This will force the wrapping algorithm to start a new page when rendering that element.
```
import { Document, Page, Text } from '@react-pdf/renderer'
const doc = () => (
<Document>
<Page wrap>
<Text break>
// fancy things here
</Text>
</Page>
</Document>
);
```
<GoToExample name="page-breaks" />
#### Fixed components
There is still another scenario we didn't talk about yet: what if you want to wrap pages but also be able to render a component on _all_ pages? This is where the `fixed` prop comes into play.
```
import { Document, Page, View } from '@react-pdf/renderer'
const doc = () => (
<Document>
<Page wrap>
<View fixed>
// fancy things here
</View>
</Page>
</Document>
);
```
Just by that, the `<View />` component will be placed repeatedly throughout all pages.
> **Protip:** This feature can be very handy for creating nice headers, footers or page numbers, among other use cases. You can even absolutely position fixed elements on your page to create more complex layouts!
<GoToExample name="fixed-components" />
---
================================================
FILE: docs/quick-start.md
================================================
import EditButton from '../src/components/Docs/EditButton'
import GoToExample from '../src/components/Docs/GoToExample'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
### 1. Install React and react-pdf
Starting with react-pdf is extremely simple.
#### Using npm
```
npm install @react-pdf/renderer --save
```
#### Using Yarn
```
yarn add @react-pdf/renderer
```
#### Using pnpm
```
pnpm add @react-pdf/renderer
```
#### Using Bun
```
bun add @react-pdf/renderer
```
Since a renderer simply implements _how elements render into something_, you still need to have React to make it work (and react-dom for client-side document generation). You can find instructions on how to do that [here](https://react.dev/learn/add-react-to-an-existing-project).
### 2. Create your PDF document
This is where things start getting interesting. React-pdf exports a set of React primitives that enable you to render things into your document very easily. It also has an API for styling them, using CSS properties and Flexbox layout.
Let's make the code speak for itself:
```
import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
}
});
// Create Document Component
const MyDocument = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
```
This will produce a PDF document with a single page. Inside, two different blocks, each of them rendering a different text. These are not the only valid primitives you can use. Please refer to the Components or Examples sections for more information.
### 3. Choose where to render the document
React-pdf enables you to render the document in two different environments: **web** and **server**. The process is essentially the same, but catered to needs of each environment.
#### Save in a file
```
import ReactPDF from '@react-pdf/renderer';
ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);
```
#### Render to a stream
```
import ReactPDF from '@react-pdf/renderer';
ReactPDF.renderToStream(<MyDocument />);
```
#### Render in DOM
```
import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';
const App = () => (
<PDFViewer>
<MyDocument />
</PDFViewer>
);
ReactDOM.render(<App />, document.getElementById('root'));
```
### 4. Have fun!
Maybe the most important step — make use of all react-pdf capabilities to create beautiful and awesome documents!
<NavigationButtons
nextSrc="/compatibility"
nextText="Compatibility"
/>
================================================
FILE: docs/rendering-process.md
================================================
import EditButton from '../src/components/Docs/EditButton'
import OverviewTimeline from '../src/components/Docs/OverviewTimeline'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
<EditButton to="https://github.com/react-pdf/site/blob/master/docs/rendering-process.md" />
## Rendering process overview
At a high level, the document creation process is composed by 6 concrete steps.
<OverviewTimeline />
### 1. Internal structures creation
The first step involves transforming the *React element tree* into the appropriate internal instances for each component type. This involves saving the relationship between these (parent-child) nodes.
Besides **Document**, all nodes will represent a block inside a document, with a height, width, paddings and margins (yet to be discovered).
From now on, react-pdf works over this data structure to start inferring where each block goes inside the final document.
### 2. Resolve styles
This step involves pre-processing node styles, as well as defining default values for the needed properties that were not provided by the user. This way, all successive steps can work on the basis that all required styles are defined in the tree.
Part of the pre-processing involves unit conversion, style inheritance and styles expansion.
### 3. Fetching assets
Time to ask for all needed resources! We traverse the internal nodes tree fetching any required *font*, *image* or *emoji*.
We run all these requests asynchronously, but we won't move forward until all requests are finished (with success or failure).
### 4. Layout text
Now that we have all fonts loaded, we can layout text into paragraphs. This is a critical and complex step: we first convert characters into glyphs using the appropriate font family and size, embed images or emoji images if present and ultimately break them into lines either on whitespaces or by breaking words based on language (or custom) rules.
### 5. Wrapping pages
This is the most time-consuming step, since it involves not just calculating where each element is in the document and how much space it will need, but also splitting these elements into different pages.
We internally use [Yoga layout](https://yogalayout.com/) to compute node's size and coordinates inside the document, and perform page breaking based on a set of customizable heuristics.
### 6. Rendering
The creation of the PDF document itself. For this task, we use the awesome [pdfkit](https://github.com/devongovett/pdfkit).
Once in this stage, we have our internal tree structure with all the needed data to generate our document. All it remains is deciding what we want to do with this data. This will vary depending on the binding you are using, but basically it means either displaying or saving it.
<NavigationButtons
backSrc="/compatibility"
backText="Compatibility"
nextSrc="/components"
nextText="Components"
/>
================================================
FILE: docs/styling.md
================================================
import List from '../src/components/UI/List'
import EditButton from '../src/components/Docs/EditButton'
import GoToExample from '../src/components/Docs/GoToExample'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
<EditButton to="https://github.com/react-pdf/site/blob/master/docs/styling.md" />
## Styling
Because a document without styles would be very boring, react-pdf ships a powerful styling solution using CSS and Flexbox.
### StyleSheet API
React-pdf also sticks with the primitives specs when it comes to styling.
#### StyleSheet.create()
Create a stylesheet. This method expects a valid JS object as only argument (containing as much css definitions as you want) and returns an object that you can pass down to components via the `style` prop
```
import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: { backgroundColor: 'tomato' },
section: { color: 'white', textAlign: 'center', margin: 30 }
});
const doc = (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
</Page>
</Document>
);
ReactPDF.render(doc);
```
<GoToExample name="styles" />
#### Inline styling
There's no need to call `StyleSheet.create` in order to style components. You can also just pass a plain JS object to the `style` prop and react-pdf will get the job done.
```
import React from 'react';
import { Page, Text, View, Document } from '@react-pdf/renderer';
const MyDocument = () => (
<Document>
<Page size="A4" style={{ backgroundColor: 'tomato' }}>
<View style={{ color: 'white', textAlign: 'center', margin: 30 }}>
<Text>Section #1</Text>
</View>
</Page>
</Document>
);
```
<GoToExample name="inline-styles" />
#### Mixing both solutions
The `style` prop also accepts an Array as value, containing any possible combination of the last two alternatives
```
import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: { backgroundColor: 'tomato' },
section: { textAlign: 'center', margin: 30 }
});
const MyDocument = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={[styles.section, { color: 'white' }]}>
<Text>Section #1</Text>
</View>
</Page>
</Document>
);
```
> **Protip:** This can be useful when you want to apply both predefined styles, and styles based on props
<GoToExample name="mixed-styles" />
---
### Media queries
There may be times in which you'll need to apply different styles based on the document context. For that, we provide media-queries support (just as you would do it for the web!). You can query based on both `width` and `height` (min and max), and also `orientation`:
```
import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
const styles = StyleSheet.create({
section: {
width: 200,
'@media max-width: 400': {
width: 300,
},
'@media orientation: landscape': {
width: 400,
},
}
});
const MyDocument = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
</Page>
</Document>
);
```
<GoToExample name="media-queries" />
---
### Valid units
`pt` _(default. Based on the standard 72 dpi PDF document)_
`in` inches
`mm` millimeters
`cm` centimeters
`%` percentage
`vw` viewport/page width
`vh` viewport/page height
---
### Valid CSS properties
#### Flexbox
- alignContent
- alignItems
- alignSelf
- flex
- flexDirection
- flexWrap
- flexFlow
- flexGrow
- flexShrink
- flexBasis
- justifyContent
- gap
- rowGap
- columnGap
#### Layout
- aspectRatio
- bottom
- display
- left
- position _(relative, absolute, static)_
- right
- top
- overflow
- zIndex
#### Dimension
- height
- maxHeight
- maxWidth
- minHeight
- minWidth
- width
#### Color
- backgroundColor
- color
- opacity
#### Text
- direction _(ltr, rtl)_
- fontSize
- fontFamily
- fontStyle
- fontWeight
- letterSpacing
- lineHeight
- maxLines
- textAlign
- textDecoration
- textDecorationColor
- textDecorationStyle
- textIndent
- textOverflow
- textTransform
- verticalAlign _(sub, super)_
#### Sizing/positioning
- object-fit
- object-position
#### Margin/padding
- margin
- marginHorizontal
- marginVertical
- marginTop
- marginRight
- marginBottom
- marginLeft
- padding
- paddingHorizontal
- paddingVertical
- paddingTop
- paddingRight
- paddingBottom
- paddingLeft
#### Transformations
- transform:rotate
- transform:scale
- transform:scaleX
- transform:scaleY
- transform:translate
- transform:translateX
- transform:translateY
- transform:skew
- transform:skewX
- transform:skewY
- transform:matrix
- transformOrigin
#### Borders
- border
- borderColor
- borderStyle
- borderWidth
- borderTop
- borderTopColor
- borderTopStyle
- borderTopWidth
- borderRight
- borderRightColor
- borderRightStyle
- borderRightWidth
- borderBottom
- borderBottomColor
- borderBottomStyle
- borderBottomWidth
- borderLeft
- borderLeftColor
- borderLeftStyle
- borderLeftWidth
- borderTopLeftRadius
- borderTopRightRadius
- borderBottomRightRadius
- borderBottomLeftRadius
<NavigationButtons
backSrc="/hooks"
backText="Hooks"
nextSrc="/fonts"
nextText="Fonts"
/>
================================================
FILE: docs/svg.md
================================================
import EditButton from '../src/components/Docs/EditButton'
import GoToExample from '../src/components/Docs/GoToExample'
import NavigationButtons from '../src/components/Docs/NavigationButtons'
<EditButton to="https://github.com/react-pdf/site/blob/master/docs/svg.md" />
## SVG Images
### Svg
The `<Svg />` element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents.
#### Valid props
| Prop name | Description | Type | Default |
| ------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -----------------: | ----------: |
| width | The displayed width of the rectangular viewport | _String_, _Number_ | _undefined_ |
| height | The displayed height of the rectangular viewport | _String_, _Number_ | _undefined_ |
| viewBox | The SVG viewport coordinates for the current SVG fragment | _String_ | _undefined_ |
| preserveAspectRatio | How the svg fragment must be deformed if it is displayed with a different aspect ratio. [See more](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) | _String_ | _undefined_ |
| style | Defines SVG styles. [See more](/styling) | _Object_, _Array_ | _undefined_ |
<GoToExample name="svg" />
---
### Line
The `<Line />` element is used to create a line.
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :-------------------------------------------------------: | -----------------: | ----------: |
| x1 | Defines the x-axis coordinate of the line starting point. | _String_, _Number_ | _undefined_ |
| x2 | Defines the x-axis coordinate of the line ending point. | _String_, _Number_ | _undefined_ |
| y1 | Defines the y-axis coordinate of the line starting point. | _String_, _Number_ | _undefined_ |
| y2 | Defines the y-axis coordinate of the line ending point. | _String_, _Number_ | _undefined_ |
See also [Presentation Attributes](#presentation-attributes)
<GoToExample name="line" />
---
### Polyline
The `<Polyline />` element is used to create any shape that consists of only straight lines (that is connected at several points).
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :---------------------------------------------------------------------------------------------------------: | -------: | ----------: |
| points | This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline | _String_ | _undefined_ |
See also [Presentation Attributes](#presentation-attributes)
<GoToExample name="polyline" />
---
### Polygon
The `<Polygon />` element is used to create a graphic that contains at least three sides.
Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :--------------------------------------------------------------------------------------------------------: | -------: | ----------: |
| points | This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon | _String_ | _undefined_ |
See also [Presentation Attributes](#presentation-attributes)
<GoToExample name="polygon" />
---
### Path
The `<Path />` element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :--------------------------------------------------------------------------------------------------------------------: | -------: | ----------: |
| d | This attribute defines the shape of the path. [See more](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) | _String_ | _undefined_ |
See also [Presentation Attributes](#presentation-attributes)
<GoToExample name="path" />
---
### Rect
The `<Rect />` element is used to create a rectangle and variations of a rectangle shape.
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :---------------------------------------: | -----------------: | ----------: |
| x | The x coordinate of the rect. | _String_, _Number_ | _undefined_ |
| y | The y coordinate of the rect. | _String_, _Number_ | _undefined_ |
| width | The width of the rect. | _String_, _Number_ | _undefined_ |
| height | The height of the rect. | _String_, _Number_ | _undefined_ |
| rx | The horizontal corner radius of the rect. | _String_, _Number_ | _undefined_ |
| ry | The vertical corner radius of the rect. | _String_, _Number_ | _undefined_ |
See also [Presentation Attributes](#presentation-attributes)
<GoToExample name="rect" />
---
### Circle
The `<Circle />` element is used to create a circle.
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :------------------------------------------------: | -----------------: | ----------: |
| cx | The x-axis coordinate of the center of the circle. | _String_, _Number_ | _undefined_ |
| cy | The y-axis coordinate of the center of the circle. | _String_, _Number_ | _undefined_ |
| r | The radius of the circle. | _String_, _Number_ | _undefined_ |
See also [Presentation Attributes](#presentation-attributes)
<GoToExample name="circle" />
---
### Ellipse
The `<Ellipse />` element is used to create an ellipse.
An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :--------------------------------------: | -----------------: | ----------: |
| cx | The x position of the ellipse. | _String_, _Number_ | _undefined_ |
| cy | The y position of the ellipse. | _String_, _Number_ | _undefined_ |
| rx | The radius of the ellipse on the x axis. | _String_, _Number_ | _undefined_ |
| ry | The radius of the ellipse on the y axis. | _String_, _Number_ | _undefined_ |
See also [Presentation Attributes](#presentation-attributes)
<GoToExample name="ellipse" />
---
### Text
The `<Text />` element draws a graphics element consisting of text.
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :----------------------------------------------------------: | -----------------: | ----------: |
| x | The x coordinate of the starting point of the text baseline. | _String_, _Number_ | _undefined_ |
| y | The y coordinate of the starting point of the text baseline. | _String_, _Number_ | _undefined_ |
See also [Presentation Attributes](#presentation-attributes)
<GoToExample name="svgtext" />
---
### Tspan
The SVG `<Tspan />` element defines a subtext within a `<Text />` element or another `<Tspan />` element. It allows for adjustment of the style and/or position of that subtext as needed.
#### Valid props
| Prop name | Description | Type | Default |
| --------- | :----------------------------------------------------------: | -----------------: | ----------: |
| x | The x coordinate of the starting point of the text baseline. | _String_, _Number_ | _undefined_ |
| y | The y coordinate of the starting point of the text baseline. | _String_, _Number_ | _undefined_ |
See also [Presentation Attributes](#presentation-attributes)
---
### G
The `<G />` SVG element is a container used to group other SVG elements.
Transformations applied to the `<G />` element are performed on its child elements, and its attributes are inherited by its children.
#### Valid props
This element only includes [Presentation Attributes](#presentation-attributes)
<GoToExample name="g" />
---
### Stop
The SVG `<Stop />` element defines a color and its position to use on a gradient. This element is always a child of a `<LinearGradient />` or `<RadialGradient />` element
#### Valid props
| Prop name | Description | Type | Default |
| ----------- | :-------------------------------------------------------------------------: | -----------------: | ----------: |
| offset | Defines where the gradient stop is placed along the gradient vector. | _String_, _Number_ | _undefined_ |
| stopColor | Defines the color of the gradient stop. It can be used as a CSS property. | _String_ | _undefined_ |
| stopOpacity | Defines the opacity of the gradient stop. It can be used as a CSS property. | _String_, _Number_ | _1_ |
---
### Defs
The `<Defs />` element is used to store graphical objects that will be used at a later time. Objects created inside a `<Defs />` element are not rendered directly. To display them you have to reference them
---
### ClipPath
The `<ClipPath />` SVG element defines a clipping path, to be used by the `clipPath` property.
A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
<GoToExample name="clippath" />
---
### LinearGradient
The `<LinearGradient />` element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.
#### Valid props
| Prop name | Description | Type | Default |
| ----------------- | :-------------------------------------------------------------------------------------------------------------: | -----------------: | ----------: |
| x1 | Defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. | _String_, _Number_ | _undefined_ |
| x2 | Defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. | _String_, _Number_ | _undefined_ |
| y1 | Defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. | _String_, _Number_ | _undefined_ |
| y2 | Defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. | _String_, _Number_ | _undefined_ |
| xlinkHref | Reference to another gradient to inherit its stops and attributes from. | _String_ | _undefined_ |
| gradientTransform | Defines a transformation to be applied to the gradient. | _String_ | _undefined_ |
| gradientUnits | Defines the coordinate system for the gradient attributes. _Valid values: "userSpaceOnUse" or "objectBoundingBox"_ | _String_ | _undefined_ |
<GoToExample name="lineargradient" />
---
### RadialGradient
The `<RadialGradient />` element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
#### Valid props
| Prop name | Description | Type | Default |
| ----------------- | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: | -----------------: | ----------: |
| cx | Defines the x coordinate of the end circle of the radial gradient. | _String_, _Number_ | _undefined_ |
| cy | Defines the y coordinate of the end circle of the radial gradient. | _String_, _Number_ | _undefined_ |
| r | Defines the radius of the end circle of the radial gradient. | _String_, _Number_ | _undefined_ |
| fr | Defines the radius of the start circle of the radial gradient. The gradient will be drawn such that the 0% `<Stop>` is mapped to the perimeter of the start circle. | _String_, _Number_ | _undefined_ |
| fx | Defines the x coordinate of the start circle of the radial gradient. | _String_, _Number_ | _undefined_ |
| fy | Defines the y coordinate of the start circle of the radial gradient. | _String_, _Number_ | _undefined_ |
| xlinkHref | Reference to another gradient to inherit its stops and attributes from. | _String_ | _undefined_ |
| gradientTransform | Defines a transformation to be applied to the gradient. | _String_ | _undefined_ |
| gradientUnits | Defines the coordinate system for the gradient attributes. _Valid values: "userSpaceOnUse" or "objectBoundingBox"_ | _String_ | _undefined_ |
<GoToExample name="radialgradient" />
---
### Presentation Attributes
SVG presentation attributes are CSS properties that can be used as attributes on SVG elements. This means it can be passed either inside a `style` object or directly by element's props.
#### Supported attributes
| Prop name | Description | Type | Default |
| ---------------- | :------------------------------------------------------------------------------------------------: | -----------------: | ----------: |
| color | Provides a potential indirect value for the fill or stroke attributes. | _String_ | _undefined_ |
| dominantBaseline | Defines the baseline used to align the box’s text and inline-level contents. | _String_ | _auto_ |
| fill | It defines the color of the inside of the graphical element it applies to. | _String_ | _undefined_ |
| fillOpacity | It specifies the opacity of the color or the content the current object is filled with. | _String_, _Number_ | _1_ |
| fillRule | It indicates how to determine what side of a path is inside a shape. | _String_ | _nonzero_ |
| opacity | It specifies the transparency of an object or a group of objects. | _String_, _Number_ | _1_ |
| stroke | Defines the color used to paint the outline of the shape. | _String_ | _undefined_ |
| strokeWidth | Defines the width of the stroke to be applied to the shape. | _String_, _Number_ | _1_ |
| strokeOpacity | Defines the opacity of the stroke of a shape. | _String_, _Number_ | _1_ |
| strokeLinecap | Defines the shape to be used at the end of open subpaths when they are stroked. | _String_ | _butt_ |
| strokeLinejoin | Defines the shape to be used at the corners of paths when they are stroked. | _String_ | _miter_ |
| strokeDasharray | Defines the pattern of dashes and gaps used to paint the outline of the shape. | _String_ | _undefined_ |
| transform | Defines a list of transform definitions that are applied to an element and the element's children. | _String_ | _undefined_ |
| textAnchor | Defines the horizontal alignment of a string of text. | _String_ | _undefined_ |
| visibility | Lets you control the visibility of graphical elements. | _String_ | _visible_ |
<NavigationButtons
backSrc="/components"
backText="Components"
nextSrc="/form"
nextText="Forms"
/>
================================================
FILE: docs/web-workers.md
================================================
### Rendering large documents in the browser
If you need to render documents with 30 pages or more in the browser, using react-pdf directly in React can occupy the browser's main thread for a long time.
This can lead to unresponsive UI and browsers offering the user to abort the script.
To avoid this, you should render large documents inside a web worker.
Web workers are executed in separate threads, and therefore do not block the main thread of the browser.
This way, the UI can stay responsive while the PDF is being rendered.
For an example on how to run react-pdf in a web worker, see this [blog post](https://dev.to/simonhessel/creating-pdf-files-without-slowing-down-your-app-a42).
================================================
FILE: env-config.js
================================================
require('dotenv').config();
module.exports = {
'process.env.GA_TOKEN': process.env.GA_TOKEN
}
================================================
FILE: examples/breakable-unbreakable.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
title: { marginTop: "90%" },
emphasis: { fontFamily: 'Helvetica-Bold', color: '#F22300' },
breakable: { width: '100%', height: 400, backgroundColor: 'tomato' },
unbreakable: { width: '100%', height: 400 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4" wrap>
<Text style={styles.title}>This is a <Text style={styles.emphasis}>breakable</Text> component. You can see how it wraps to the next page:</Text>
<View style={styles.breakable} />
<Text style={styles.title}>This is an <Text style={styles.emphasis}>unbreakable</Text> component. Instead of wrapping, it jumps to the next page:</Text>
<Image src="/images/quijote1.jpg" />
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/checkbox.txt
================================================
const Multichoice = () => {
const currentYear = new Date().getYear()+1900;
return (
<View>
<Text style={styles.heading}>Questions</Text>
<Question answers={['Flask', 'ReactPDF', 'SolidJS', 'Spring Boot']} name="technology">
Which technology is used to generate this pdf?
</Question>
<Question answers={[currentYear+1, currentYear-2, currentYear, currentYear-1]} name="year">
What year is it?
</Question>
<Question answers={['MacOS', 'TempleOS', 'Windows', 'Ubuntu']} name="os">
What operating system was developed by Apple?
</Question>
<Question answers={['Software', 'Construction', 'Hardware', 'Agriculture']} name="ram">
Where does RAM get used?
</Question>
<FreeSpace free={250}/>
<FormField style={[styles.inlineFlex, styles.break]} name="read">
<Text>I have read all the questions above: </Text>
<Checkbox checked required style={styles.checkbox} />
</FormField>
<FormField style={[styles.inlineFlex, styles.break]} name="knowledge">
<Text>I only used my own knowledge to answer the questions: </Text>
<Checkbox required style={styles.checkbox} />
</FormField>
</View>
)
};
const Question = (props) => (
<FormField name={props.name} style={styles.break}>
<Text style={[styles.question, styles.break]}>{props.children}</Text>
<Answers choices={props.answers}/>
</FormField>
)
const Answers = (props) => (
<View style={styles.verticalFlex}>
{
props.choices.map(choice => (
<View style={styles.verticalFlex}>
<Text>{choice} </Text>
<Checkbox name={choice} style={styles.checkbox} />
</View>
))
}
</View>
)
const FreeSpace = (props) => <View style={{marginTop: props.free}}/>
const styles = StyleSheet.create({
page: {
padding: 60
},
checkbox: {
height: 20,
width: 20
},
heading: {
fontSize: 24,
textAlign: 'center',
marginBottom: 40
},
question: {
fontSize: 20
},
break: {
marginBottom: 10
},
verticalFlex: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around'
},
inlineFlex: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start'
}
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Multichoice />
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/circle.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg viewBox="0 0 100 100">
<Circle
cx="50"
cy="50"
r="40"
fill="tomato"
stroke="gray"
/>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/clippath.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg viewBox="0 0 100 100">
<Defs>
<ClipPath id="clipPath">
<Rect x="15" y="15" width="40" height="40" />
</ClipPath>
</Defs>
<Circle
cx="25"
cy="25"
r="20"
fill="#0000ff"
clipPath="url(#clipPath)"
/>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/debugging.txt
================================================
const styles = StyleSheet.create({
container: {
height: 300,
width: 400,
margin: 20,
paddingVertical: 20,
},
});
const MyDocument = () => (
<Document>
<Page>
<View style={styles.container} debug />
</Page>
</Document>
);
ReactPDF.render(<MyDocument />);
================================================
FILE: examples/disable-hyphenation.txt
================================================
Font.registerHyphenationCallback(word => {
// Return entire word as unique part
return [word];
});
const styles = StyleSheet.create({
container: {
padding: 50
},
text: {
textAlign: 'justify'
}
});
const MyDocument = () => (
<Document>
<Page style={styles.container}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed vulputate erat id sagittis porta. Phasellus ut diam
sit amet mi sagittis faucibus sed in purus. Etiam pretium
et lacus sit amet fringilla. Aenean hendrerit volutpat nulla,
at facilisis ante bibendum non. Integer ut nulla nulla.
Etiam ornare interdum iaculis. Sed lectus nisl, faucibus
vitae posuere ut, lobortis in lectus. Donec ac magna in
libero tincidunt volutpat. Donec ut varius quam. Duis ornare
justo quis sapien bibendum cursus.
</Text>
</Page>
</Document>
);
ReactPDF.render(<MyDocument />);
================================================
FILE: examples/disable-wrapping.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
title: { marginTop: "90%" },
emphasis: { fontFamily: 'Helvetica-Bold', color: '#F22300' },
breakable: { width: '100%', height: 400, backgroundColor: 'tomato' }
});
const doc = (
<Document>
<Page style={styles.page} size="A4" wrap>
<Text style={styles.title}>This is a <Text style={styles.emphasis}>breakable</Text> component made <Text style={styles.emphasis}>unbreakable</Text>. Instead of wrapping between both pages, it jumps straight to the next one</Text>
<View style={styles.breakable} wrap={false} />
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/ellipse.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg viewBox="0 0 200 100">
<Ellipse
cx="100"
cy="50"
rx="80"
ry="40"
fill="tomato"
stroke="gray"
/>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/emoji.txt
================================================
const styles = StyleSheet.create({
container: {
height: 700,
marginVertical: 70,
marginHorizontal: "10%"
},
text: {
fontSize: 100,
textAlign: 'center'
}
});
Font.registerEmojiSource({
format: 'png',
url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/',
});
const MyDocument = () => (
<Document>
<Page>
<View style={styles.container}>
<Text style={styles.text}>
😀💩👻🙈
</Text>
</View>
</Page>
</Document>
);
ReactPDF.render(<MyDocument />);
================================================
FILE: examples/fixed-components.txt
================================================
const styles = StyleSheet.create({
container: {
height: 1200,
width: '100%',
},
fixed: {
bottom: 0,
left: 0,
width: '100%',
padding: 10,
position: 'absolute',
}
});
const MyDocument = () => (
<Document>
<Page>
<View style={styles.container} />
<Text style={styles.fixed} fixed>
I'm fixed to each page
</Text>
</Page>
</Document>
);
ReactPDF.render(<MyDocument />);
================================================
FILE: examples/font-register.txt
================================================
Font.register({
family: 'Roboto',
fonts: [
{
src: `fonts/Roboto-Regular.ttf`
},
{
src: `fonts/Roboto-Bold.ttf`,
fontWeight: 'bold'
},
{
src: `fonts/Roboto-Italic.ttf`,
fontWeight: 'normal',
fontStyle: 'italic'
},
{
src: `fonts/Roboto-BoldItalic.ttf`,
fontWeight: 'bold',
fontStyle: 'italic'
}
]
})
const MyDocument = () => (
<Document>
<Page>
<Text style={{ fontFamily: 'Roboto' }}>
Velit sit cillum adipisicing aliqua id sint cillum occaecat fugiat adipisicing non elit.
</Text>
<Text style={{ fontFamily: 'Roboto', fontWeight: 'bold' }}>
Velit sit cillum adipisicing aliqua id sint cillum occaecat fugiat adipisicing non elit.
</Text>
<Text style={{ fontFamily: 'Roboto', fontStyle: 'italic' }}>
Velit sit cillum adipisicing aliqua id sint cillum occaecat fugiat adipisicing non elit.
</Text>
<Text style={{ fontFamily: 'Roboto', fontStyle: 'italic', fontWeight: 700 }}>
Velit sit cillum adipisicing aliqua id sint cillum occaecat fugiat adipisicing non elit.
</Text>
</Page>
</Document>
);
ReactPDF.render(<MyDocument />);
================================================
FILE: examples/formfield.txt
================================================
const Address = (props) => (
<FormField name={props.name.toLowerCase()}>
<Text style={styles.heading}>{props.name}</Text>
<Text>Street</Text>
<TextInput
name="street"
noSpell
required={props.required}
style={styles.textinput}/>
<Text>House Nr.</Text>
<TextInput
name="house"
noSpell
required={props.required}
style={styles.textinput}/>
<Text>Postal code</Text>
<TextInput
name="postal-code"
noSpell
required={props.required}
style={styles.textinput}/>
<Text>City</Text>
<TextInput
name="city"
noSpell
required={props.required}
style={styles.textinput}/>
<Text>Country</Text>
<TextInput
name="country"
noSpell
required={props.required}
style={styles.textinput}/>
</FormField>
)
const Invoice = () => (
<View>
<Text style={styles.heading}>Invoice</Text>
<View style={styles.verticalFlex}>
<View style={styles.flexGrow}>
<Address name="Billing" required/>
</View>
<View style={styles.flexGrow}>
<Address name="Shipping"/>
</View>
</View>
<Text>Name of Product</Text>
<TextInput
name="product"
noSpell
required
style={styles.textinput}/>
</View>
);
const styles = StyleSheet.create({
page: {
padding: 60
},
heading: {
fontSize: 24,
textAlign: 'center',
marginBottom: 40
},
textinput: {
height: 14.4,
marginRight: 50,
marginTop: 10,
marginBottom: 20
},
verticalFlex: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around'
},
flexGrow: {
flexGrow: 1
}
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Invoice />
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/fractals.txt
================================================
const styles = StyleSheet.create({
row: {
flexGrow: 1,
flexDirection: 'row',
},
column: {
flexGrow: 1,
},
text: {
margin: 10,
fontSize: 10,
color: 'white',
},
});
const palette = [
'#781c81',
'#521b80',
'#442f8b',
'#3f4c9f',
'#4069b4',
'#4582c1',
'#4e96bd',
'#5aa6a9',
'#68b090',
'#7ab878',
'#8dbc64',
'#a2be56',
'#b7bd4b',
'#c9b843',
'#d8ae3d',
'#e29e37',
'#e78632',
'#e6672d',
'#e14427',
'#d92120',
];
const toggle = direction => (direction === 'column' ? 'row' : 'column');
// Creates Fractal Component that renders it's step with a background color
const Fractal = ({ steps, direction = 'column' }) => {
if (steps === 0) {
return null;
}
const fractalStyle = {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: palette[steps],
};
return (
<View style={styles[direction]}>
<Fractal direction={toggle(direction)} steps={steps - 1} />
<View style={fractalStyle}>
<Text style={styles.text}>{steps}</Text>
</View>
</View>
);
};
const doc = (
<Document
title="Fractals"
author="John Doe"
subject="Rendering fractals with react-pdf"
keywords={['react', 'pdf', 'fractals']}
>
<Page size="A4">
<Fractal steps={18} />
</Page>
<Page orientation="landscape" size="A4">
<Fractal steps={14} />
</Page>
<Page size="B4">
<Fractal steps={10} />
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/g.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg viewBox="0 0 100 100">
<G fill="white" stroke="green" stroke-width="5">
<Circle cx="40" cy="40" r="25" />
<Circle cx="60" cy="60" r="25" />
</G>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/hyphenation-callback.txt
================================================
// Register hyphenation callback.
// In this example, we enable words to break in half
Font.registerHyphenationCallback(word => {
const middle = Math.floor(word.length / 2);
const parts = word.length === 1 ? [word] : [word.substr(0, middle), word.substr(middle)];
// Check console to see words parts
console.log(word, parts);
return parts;
});
const styles = StyleSheet.create({
container: {
padding: 50
},
text: {
textAlign: 'justify'
}
});
const MyDocument = () => (
<Document>
<Page style={styles.container}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed vulputate erat id sagittis porta. Phasellus ut diam
sit amet mi sagittis faucibus sed in purus. Etiam pretium
et lacus sit amet fringilla. Aenean hendrerit volutpat nulla,
at facilisis ante bibendum non. Integer ut nulla nulla.
Etiam ornare interdum iaculis. Sed lectus nisl, faucibus
vitae posuere ut, lobortis in lectus. Donec ac magna in
libero tincidunt volutpat. Donec ut varius quam. Duis ornare
justo quis sapien bibendum cursus.
</Text>
</Page>
</Document>
);
ReactPDF.render(<MyDocument />);
================================================
FILE: examples/images.txt
================================================
const styles = StyleSheet.create({
page: { flexDirection: 'row' },
image: { flexGrow: 8, backgroundColor: 'grey', padding: 10 },
text: {
flexGrow: 3,
backgroundColor: '#f0f0f0',
color: '#212121',
paddingHorizontal: 50,
paddingVertical: 30,
},
});
const doc = (
<Document>
<Page style={styles.page} size={[1500, 600]}>
<Image
style={styles.image}
src="/images/mountains.jpg"
/>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</Text>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/inline-styles.txt
================================================
const doc = (
<Document>
<Page size="A4" style={{ backgroundColor: 'tomato' }}>
<View style={{ color: 'white', textAlign: 'center', margin: 30 }}>
<Text>Section #1</Text>
</View>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/knobs.txt
================================================
const styles = StyleSheet.create({
select: {
height: '9%',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: '30px',
},
bar: {
flexGrow: 1,
height: '10px',
backgroundColor: 'gray',
},
barMiddle: {
width: '50%',
height: '100%',
backgroundColor: 'lightgray',
margin: 'auto',
},
knob: {
alignItems: 'center',
justifyContent: 'center',
width: '20px',
height: '20px',
borderRadius: 10,
borderWidth: 3,
borderColor: 'orange',
position: 'absolute',
backgroundColor: 'white',
fontSize: 8,
top: -6,
},
text: {
fontSize: 10,
},
});
const Knob = ({ value }) =>
<View style={[styles.knob, { left: `${value - 3}%` }]}>
<Text style={{ fontSize: 8, marginTop: 4 }}>
{value}
</Text>
</View>;
const Select = props =>
<View style={styles.select}>
<Text style={[styles.text, { marginRight: '15px' }]}>0%</Text>
<View style={styles.bar}>
<View style={styles.barMiddle} />
<Knob {...props} />
</View>
<Text style={[styles.text, { marginLeft: '15px' }]}>100%</Text>
</View>;
const doc = (
<Document>
<Page size="A5">
<Select value={0} />
<Select value={10} />
<Select value={20} />
<Select value={30} />
<Select value={40} />
<Select value={50} />
<Select value={60} />
<Select value={70} />
<Select value={80} />
<Select value={90} />
<Select value={100} />
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/line.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg height="210" width="500">
<Line
x1="0"
y1="0"
x2="200"
y2="200"
strokeWidth={2}
stroke="rgb(255,0,0)"
/>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/lineargradient.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg viewBox="0 0 10 20" width="170">
<Defs>
<LinearGradient id="myLinearGradient">
<Stop offset="5%" stopColor="gold" />
<Stop offset="95%" stopColor="red" />
</LinearGradient>
</Defs>
<Circle cx="5" cy="5" r="4" fill="url('#myLinearGradient')" />
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/math.txt
================================================
const styles = StyleSheet.create({
page: {
padding: 40,
backgroundColor: '#fafafa',
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 4,
color: '#1a1a1a',
},
subtitle: {
fontSize: 9,
color: '#888',
marginBottom: 20,
},
card: {
backgroundColor: 'white',
borderRadius: 5,
padding: 12,
marginBottom: 8,
borderWidth: 1,
borderColor: '#e8e8e8',
},
cardLabel: {
fontSize: 8,
color: '#999',
marginBottom: 6,
textTransform: 'uppercase',
letterSpacing: 0.5,
},
row: {
flexDirection: 'row',
gap: 8,
marginBottom: 8,
},
halfCard: {
flex: 1,
backgroundColor: 'white',
borderRadius: 5,
padding: 12,
borderWidth: 1,
borderColor: '#e8e8e8',
},
inlineRow: {
flexDirection: 'row',
alignItems: 'center',
},
inlineText: {
fontSize: 10,
color: '#333',
},
footer: {
marginTop: 'auto',
paddingTop: 12,
borderTopWidth: 1,
borderTopColor: '#e8e8e8',
flexDirection: 'row',
justifyContent: 'space-between',
},
footerText: {
fontSize: 7,
color: '#aaa',
},
});
const doc = (
<Document>
<Page size="A4" style={styles.page}>
<Text style={styles.title}>Mathematical Typesetting</Text>
<Text style={styles.subtitle}>
LaTeX expressions rendered as vector graphics via @react-pdf/math
</Text>
<View style={styles.card}>
<Text style={styles.cardLabel}>Quadratic Formula</Text>
<Math height={34}>{'x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'}</Math>
</View>
<View style={styles.row}>
<View style={styles.halfCard}>
<Text style={styles.cardLabel}>Euler's Identity</Text>
<Math height={18}>{'e^{i\\pi} + 1 = 0'}</Math>
</View>
<View style={styles.halfCard}>
<Text style={styles.cardLabel}>Limits</Text>
<Math height={26}>{'\\lim_{x \\to 0} \\frac{\\sin x}{x} = 1'}</Math>
</View>
</View>
<View style={styles.row}>
<View style={styles.halfCard}>
<Text style={styles.cardLabel}>Gaussian Integral</Text>
<Math height={32}>
{'\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}'}
</Math>
</View>
<View style={styles.halfCard}>
<Text style={styles.cardLabel}>Basel Problem</Text>
<Math height={32}>
{'\\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}'}
</Math>
</View>
</View>
<View style={styles.card}>
<Text style={styles.cardLabel}>Matrix Notation</Text>
<Math height={36}>
{'A = \\begin{pmatrix} a_{11} & a_{12} \\\\ a_{21} & a_{22} \\end{pmatrix}'}
</Math>
</View>
<View style={styles.card}>
<Text style={styles.cardLabel}>Binomial Theorem</Text>
<Math height={34}>
{'(x + y)^n = \\sum_{k=0}^{n} \\binom{n}{k} x^{n-k} y^k'}
</Math>
</View>
<View style={styles.card}>
<Text style={styles.cardLabel}>Maxwell's Equation (Faraday's Law)</Text>
<Math height={32}>
{'\\nabla \\times \\vec{E} = -\\frac{\\partial \\vec{B}}{\\partial t}'}
</Math>
</View>
<View style={styles.card}>
<Text style={styles.cardLabel}>Inline Usage</Text>
<View style={styles.inlineRow}>
<Text style={styles.inlineText}>The famous equation </Text>
<Math inline height={12}>
{'E = mc^2'}
</Math>
<Text style={styles.inlineText}> relates mass and energy.</Text>
</View>
</View>
<View style={styles.footer}>
<Text style={styles.footerText}>Generated with @react-pdf/math</Text>
<Text style={styles.footerText}>Powered by MathJax</Text>
</View>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/media-queries.txt
================================================
const styles = StyleSheet.create({
body: {
padding: 35,
},
content: {
padding: 20,
'@media max-width: 400': {
flexDirection: 'column',
},
'@media min-width: 400': {
flexDirection: 'row',
},
},
block: {
height: 150,
width: 150,
backgroundColor: 'red',
},
});
const MediaComponent = () => (
<View style={styles.content}>
<View style={[styles.block, { backgroundColor: 'red' }]} />
<View style={[styles.block, { backgroundColor: 'green' }]} />
</View>
);
const doc = (
<Document>
<Page style={styles.body} size={[500, 600]}>
<MediaComponent />
</Page>
<Page style={styles.body} size={[300, 600]}>
<MediaComponent />
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/mixed-styles.txt
================================================
const styles = StyleSheet.create({
page: { backgroundColor: 'tomato' },
section: { textAlign: 'center', margin: 30 }
});
const doc = (
<Document>
<Page size="A4" style={styles.page}>
<View style={[styles.section, { color: 'white' }]}>
<Text>Section #1</Text>
</View>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/orphans-and-widows.txt
================================================
const styles = StyleSheet.create({
page: {
padding: 60
},
text: {
margin: 12,
fontSize: 14,
textAlign: 'justify',
fontFamily: 'Times-Roman'
},
});
const doc = (
<Document>
<Page style={styles.page} size="A4" debug>
<Text style={{ marginTop: 450 }}>Widows example. Try changing prop value</Text>
<Text style={styles.text} widows={4}>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha
mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga
antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que
carnero, salpicón las más noches, duelos y quebrantos los sábados,
lentejas los viernes, algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda. El resto della concluían sayo
de velarte, calzas de velludo para las fiestas con sus pantuflos de lo
mismo, los días de entre semana se honraba con su vellori de lo más
fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina
que no llegaba a los veinte, y un mozo de campo y plaza, que así
ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro
hidalgo con los cincuenta años, era de complexión recia, seco de carnes,
enjuto de rostro; gran madrugador y amigo de la caza. Quieren decir que
tenía el sobrenombre de Quijada o Quesada (que en esto hay alguna
diferencia en los autores que deste caso escriben), aunque por
conjeturas verosímiles se deja entender que se llama Quijana; pero esto
importa poco a nuestro cuento; basta que en la narración dél no se salga
un punto de la verdad
</Text>
<Text style={{ marginTop: 550 }}>Orphans example. Try changing prop value</Text>
<Text style={styles.text} orphans={4}>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha
mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga
antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que
carnero, salpicón las más noches, duelos y quebrantos los sábados,
lentejas los viernes, algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda. El resto della concluían sayo
de velarte, calzas de velludo para las fiestas con sus pantuflos de lo
mismo, los días de entre semana se honraba con su vellori de lo más
fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina
que no llegaba a los veinte, y un mozo de campo y plaza, que así
ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro
hidalgo con los cincuenta años, era de complexión recia, seco de carnes,
enjuto de rostro; gran madrugador y amigo de la caza. Quieren decir que
tenía el sobrenombre de Quijada o Quesada (que en esto hay alguna
diferencia en los autores que deste caso escriben), aunque por
conjeturas verosímiles se deja entender que se llama Quijana; pero esto
importa poco a nuestro cuento; basta que en la narración dél no se salga
un punto de la verdad
</Text>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/page-breaks.txt
================================================
const Quixote = () => (
<Document>
<Page style={styles.body} wrap>
<Text style={styles.title}>Don Quijote de la Mancha</Text>
<Text style={styles.author}>Miguel de Cervantes</Text>
<Image
style={styles.image}
src="/images/quijote1.jpg"
/>
<Text style={styles.subtitle}>
Capítulo I: Que trata de la condición y ejercicio del famoso hidalgo D.
Quijote de la Mancha
</Text>
<Text style={styles.text}>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha
mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga
antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que
carnero, salpicón las más noches, duelos y quebrantos los sábados,
lentejas los viernes, algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda. El resto della concluían sayo
de velarte, calzas de velludo para las fiestas con sus pantuflos de lo
mismo, los días de entre semana se honraba con su vellori de lo más
fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina
que no llegaba a los veinte, y un mozo de campo y plaza, que así
ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro
hidalgo con los cincuenta años, era de complexión recia, seco de carnes,
enjuto de rostro; gran madrugador y amigo de la caza. Quieren decir que
tenía el sobrenombre de Quijada o Quesada (que en esto hay alguna
diferencia en los autores que deste caso escriben), aunque por
conjeturas verosímiles se deja entender que se llama Quijana; pero esto
importa poco a nuestro cuento; basta que en la narración dél no se salga
un punto de la verdad
</Text>
<Text style={styles.emphasis}>Instead of showing the title here</Text>
<Text style={styles.subtitle} break>
Capítulo II: Que trata de la primera salida que de su tierra hizo el
ingenioso Don Quijote
</Text>
<Text style={[styles.emphasis, { position: 'absolute', top: 60, right: 30 }]}>
It breaks to the top of the next page
</Text>
<Image
style={styles.image}
src="/images/quijote2.png"
/>
<Text style={styles.text}>
Hechas, pues, estas prevenciones, no quiso aguardar más tiempo a poner
en efeto su pensamiento, apretándole a ello la falta que él pensaba que
hacía en el mundo su tardanza, según eran los agravios que pensaba
deshacer, tuertos que enderezar, sinrazones que emendar y abusos que
mejorar y deudas que satisfacer. Y así, sin dar parte a persona alguna
de su intención y sin que nadie le viese, una mañana, antes del día, que
era uno de los calurosos del mes de Julio, se armó de todas sus armas,
subió sobre Rocinante, puesta su mal compuesta celada, embrazó su
adarga, tomó su lanza y por la puerta falsa de un corral salió al campo
con grandísimo contento y alborozo de ver con cuánta facilidad había
dado principio a su buen deseo. Mas apenas se vio en el campo cuando le
asaltó un pensamiento terrible, y tal, que por poco le hiciera dejar la
comenzada empresa; y fue que le vino a la memoria que no era armado
caballero, y que, conforme a ley de caballería, ni podía ni debía tomar
armas con ningún caballero; y puesto que lo fuera, había de llevar armas
blancas, como novel caballero, sin empresa en el escudo, hasta que por
su esfuerzo la ganase. Estos pensamientos le hicieron titubear en su
propósito; mas pudiendo más su locura que otra razón alguna, propuso de
hacerse armar caballero del primero que topase, a imitación de otros
muchos que así lo hicieron, según él había leído en los libros que tal
le tenían. En lo de las armas blancas, pensaba limpiarlas de manera, en
teniendo lugar, que lo fuesen más que un arminio; y con esto se quietó18
y prosiguió su camino, sin llevar otro que aquel que su caballo quería,
creyendo que en aquello consistía la fuerza de las aventuras
</Text>
</Page>
</Document>
);
Font.register({
family: 'Oswald',
src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf'
});
const styles = StyleSheet.create({
body: {
paddingTop: 35,
paddingBottom: 65,
paddingHorizontal: 35,
},
title: {
fontSize: 24,
textAlign: 'center',
fontFamily: 'Oswald'
},
author: {
fontSize: 12,
textAlign: 'center',
marginBottom: 40,
},
subtitle: {
fontSize: 18,
margin: 12,
fontFamily: 'Oswald'
},
text: {
margin: 12,
fontSize: 14,
textAlign: 'justify',
fontFamily: 'Times-Roman'
},
image: {
marginVertical: 30,
marginHorizontal: 100,
},
emphasis: {
margin: 12,
fontSize: 24,
color: '#F22300',
fontFamily: 'Oswald'
}
});
ReactPDF.render(<Quixote />);
================================================
FILE: examples/page-numbers.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
box: { width: '100%', marginBottom: 30, borderRadius: 5 },
pageNumbers: {
position: 'absolute',
bottom: 20,
left: 0,
right: 0,
textAlign: 'center'
},
});
const doc = (
<Document>
<Page style={styles.page} size="A4" wrap>
<View style={[styles.box, { height: 400, backgroundColor: 'tomato' }]} />
<View style={[styles.box, { height: 280, backgroundColor: 'crimson' }]} />
<View style={[styles.box, { height: 600, backgroundColor: 'deepskyblue' }]} />
<View style={[styles.box, { height: 400, backgroundColor: 'tomato' }]} />
<Text style={styles.pageNumbers} render={({ pageNumber, totalPages }) => (
`${pageNumber} / ${totalPages}`
)} fixed />
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/page-wrap.txt
================================================
const HR = () => (
<View style={styles.hr} />
);
const ChapterHeading = ({ number, children, ...props }) => (
<View style={styles.chapterHeading} {...props}>
<Text style={styles.chapterNumber}>{number}</Text>
<View style={styles.chapterRule} />
<Text style={styles.chapterTitle}>{children}</Text>
<View style={styles.chapterRule} />
</View>
);
const Quixote = () => (
<Document>
<Page style={styles.body}>
<Text style={styles.header} fixed>
Don Quijote de la Mancha
</Text>
<View style={styles.titleBlock}>
<Text style={styles.title}>Don Quijote de la Mancha</Text>
<HR />
<Text style={styles.author}>Miguel de Cervantes</Text>
</View>
<ChapterHeading number="I">
Que trata de la condición y ejercicio del famoso hidalgo D. Quijote de la Mancha
</ChapterHeading>
<Image style={styles.chapterImage} src="/images/quijote1.jpg" />
<Text style={styles.text}>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha
mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga
antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que
carnero, salpicón las más noches, duelos y quebrantos los sábados,
lentejas los viernes, algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda. El resto della concluían sayo
de velarte, calzas de velludo para las fiestas con sus pantuflos de lo
mismo, los días de entre semana se honraba con su vellori de lo más
fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina
que no llegaba a los veinte, y un mozo de campo y plaza, que así
ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro
hidalgo con los cincuenta años, era de complexión recia, seco de carnes,
enjuto de rostro; gran madrugador y amigo de la caza. Quieren decir que
tenía el sobrenombre de Quijada o Quesada (que en esto hay alguna
diferencia en los autores que deste caso escriben), aunque por
conjeturas verosímiles se deja entender que se llama Quijana; pero esto
importa poco a nuestro cuento; basta que en la narración dél no se salga
un punto de la verdad.
</Text>
<Text style={styles.text}>
Es, pues, de saber, que este sobredicho hidalgo, los ratos que estaba
ocioso (que eran los más del año) se daba a leer libros de caballerías
con tanta afición y gusto, que olvidó casi de todo punto el ejercicio de
la caza, y aun la administración de su hacienda; y llegó a tanto su
curiosidad y desatino en esto, que vendió muchas hanegas de tierra de
sembradura, para comprar libros de caballerías en que leer; y así llevó
a su casa todos cuantos pudo haber dellos; y de todos ningunos le
parecían tan bien como los que compuso el famoso Feliciano de Silva:
porque la claridad de su prosa, y aquellas intrincadas razones suyas, le
parecían de perlas; y más cuando llegaba a leer aquellos requiebros y
cartas de desafío, donde en muchas partes hallaba escrito: la razón de
la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece,
que con razón me quejo de la vuestra fermosura, y también cuando leía:
los altos cielos que de vuestra divinidad divinamente con las estrellas
se fortifican, y os hacen merecedora del merecimiento que merece la
vuestra grandeza.
</Text>
<View style={styles.pullQuote}>
<Text style={styles.pullQuoteText}>
"La razón de la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la vuestra fermosura."
</Text>
</View>
<Text style={styles.text}>
Con estas y semejantes razones perdía el pobre caballero el juicio, y
desvelábase por entenderlas, y desentrañarles el sentido, que no se lo
sacara, ni las entendiera el mismo Aristóteles, si resucitara para sólo
ello. No estaba muy bien con las heridas que don Belianís daba y
recibía, porque se imaginaba que por grandes maestros que le hubiesen
curado, no dejaría de tener el rostro y todo el cuerpo lleno de
cicatrices y señales; pero con todo alababa en su autor aquel acabar su
libro con la promesa de aquella inacabable aventura, y muchas veces le
vino deseo de tomar la pluma, y darle fin al pie de la letra como allí
se promete; y sin duda alguna lo hiciera, y aun saliera con ello, si
otros mayores y continuos pensamientos no se lo estorbaran.
</Text>
<Text style={styles.text}>
En resolución, él se enfrascó tanto en su lectura, que se le pasaban las
noches leyendo de claro en claro, y los días de turbio en turbio, y así,
del poco dormir y del mucho leer, se le secó el cerebro, de manera que
vino a perder el juicio. Llenósele la fantasía de todo aquello que leía
en los libros, así de encantamientos, como de pendencias, batallas,
desafíos, heridas, requiebros, amores, tormentas y disparates
imposibles, y asentósele de tal modo en la imaginación que era verdad
toda aquella máquina de aquellas soñadas invenciones que leía, que para
él no había otra historia más cierta en el mundo.
</Text>
<ChapterHeading number="II" break>
Que trata de la primera salida que de su tierra hizo el ingenioso Don Quijote
</ChapterHeading>
<Image style={styles.chapterImage} src="/images/quijote2.png" />
<Text style={styles.text}>
Hechas, pues, estas prevenciones, no quiso aguardar más tiempo a poner
en efeto su pensamiento, apretándole a ello la falta que él pensaba que
hacía en el mundo su tardanza, según eran los agravios que pensaba
deshacer, tuertos que enderezar, sinrazones que emendar y abusos que
mejorar y deudas que satisfacer. Y así, sin dar parte a persona alguna
de su intención y sin que nadie le viese, una mañana, antes del día, que
era uno de los calurosos del mes de Julio, se armó de todas sus armas,
subió sobre Rocinante, puesta su mal compuesta celada, embrazó su
adarga, tomó su lanza y por la puerta falsa de un corral salió al campo
con grandísimo contento y alborozo de ver con cuánta facilidad había
dado principio a su buen deseo.
</Text>
<Text style={styles.text}>
Yendo, pues, caminando nuestro flamante aventurero, iba hablando consigo
mesmo, y diciendo: —¿Quién duda, sino que en los venideros tiempos,
cuando salga a luz la verdadera historia de mis famosos hechos, que el
sabio que los escribiere no ponga, cuando llegue a contar esta mi
primera salida tan de mañana, desta manera?: Apenas había el rubicundo
Apolo tendido por la faz de la ancha y espaciosa tierra las doradas
hebras de sus hermosos cabellos, y apenas los pequeños y pintados
pajarillos con sus arpadas lenguas habían saludado con dulce y meliflua
armonía la venida de la rosada Aurora, que, dejando la blanda cama del
celoso marido, por las puertas y balcones del manchego horizonte a los
mortales se mostraba, cuando el famoso caballero don Quijote de la
Mancha, dejando las ociosas plumas, subió sobre su famoso caballo
Rocinante y comenzó a caminar por el antiguo y conocido Campo de
Montiel.
</Text>
<Text style={styles.text}>
Casi todo aquel día caminó sin acontecerle cosa que de contar fuese, de
lo cual se desesperaba, porque quisiera topar luego luego con quien
hacer experiencia del valor de su fuerte brazo. Autores hay que dicen
que la primera aventura que le avino fue la del Puerto Lápice, otros
dicen que la de los molinos de viento; pero lo que yo he podido
averiguar en este caso, y lo que he hallado escrito en los anales de la
Mancha, es que él anduvo todo aquel día, y, al anochecer, su rocín y él
se hallaron cansados y muertos de hambre, y que, mirando a todas partes
por ver si descubriría algún castillo o alguna majada de pastores donde
recogerse y adonde pudiese remediar su mucha hambre y necesidad, vio, no
lejos del camino por donde iba, una venta, que fue como si viera una
estrella que, no a los portales, sino a los alcázares de su redención le
encaminaba. Diose priesa a caminar, y llegó a ella a tiempo que
anochecía.
</Text>
<Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => (
`${pageNumber} / ${totalPages}`
)} fixed />
</Page>
</Document>
);
Font.register({
family: 'Oswald',
src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf'
});
const styles = StyleSheet.create({
titleBlock: {
alignItems: 'center',
marginBottom: 8,
},
title: {
fontSize: 24,
fontFamily: 'Oswald',
textAlign: 'center',
color: '#2c1810',
letterSpacing: 2,
textTransform: 'uppercase',
},
hr: {
borderBottomWidth: 1,
borderBottomColor: '#8B4513',
width: 60,
marginVertical: 16,
alignSelf: 'center',
},
author: {
fontSize: 13,
textAlign: 'center',
color: '#8B4513',
fontFamily: 'Times-Roman',
fontStyle: 'italic',
},
body: {
paddingTop: 50,
paddingBottom: 65,
paddingHorizontal: 65,
},
header: {
fontSize: 8,
marginBottom: 24,
textAlign: 'center',
color: '#999',
letterSpacing: 3,
textTransform: 'uppercase',
},
chapterHeading: {
alignItems: 'center',
marginBottom: 20,
paddingTop: 20,
},
chapterNumber: {
fontSize: 36,
fontFamily: 'Oswald',
color: '#8B4513',
marginBottom: 8,
},
chapterRule: {
borderBottomWidth: 0.5,
borderBottomColor: '#8B4513',
width: 40,
marginVertical: 8,
},
chapterTitle: {
fontSize: 14,
fontFamily: 'Times-Roman',
fontStyle: 'italic',
textAlign: 'center',
color: '#555',
maxWidth: 320,
lineHeight: 1.6,
},
text: {
marginBottom: 10,
fontSize: 11,
textAlign: 'justify',
fontFamily: 'Times-Roman',
lineHeight: 1.7,
color: '#333',
},
pullQuote: {
marginVertical: 16,
marginHorizontal: 30,
paddingLeft: 16,
borderLeftWidth: 2,
borderLeftColor: '#8B4513',
},
pullQuoteText: {
fontSize: 12,
fontFamily: 'Times-Roman',
fontStyle: 'italic',
lineHeight: 1.7,
color: '#555',
},
chapterImage: {
marginVertical: 16,
marginHorizontal: 60,
},
pageNumber: {
position: 'absolute',
fontSize: 9,
bottom: 30,
left: 0,
right: 0,
textAlign: 'center',
color: '#999',
},
});
ReactPDF.render(<Quixote />);
================================================
FILE: examples/path.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg width="190" height="160">
<Path
d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
stroke="rgb(128, 255, 0)"
strokeWidth={3}
/>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/picker-formlist.txt
================================================
const Combos = () => {
// Static List of names from https://restcountries.com
const countries = ["Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Bouvet Island", "Brazil", "British Indian Ocean Territory", "British Virgin Islands", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Caribbean Netherlands", "Cayman Islands", "Central African Republic", "Chad", "Chile", "China", "Christmas Island", "Cocos (Keeling) Islands", "Colombia", "Comoros", "Cook Islands", "Costa Rica", "Croatia", "Cuba", "Curaçao", "Cyprus", "Czechia", "DR Congo", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Eswatini", "Ethiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland", "France", "French Guiana", "French Polynesia", "French Southern and Antarctic Lands", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guadeloupe", "Guam", "Guatemala", "Guernsey", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Heard Island and McDonald Islands", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Isle of Man", "Israel", "Italy", "Ivory Coast", "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kosovo", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Martinique", "Mauritania", "Mauritius", "Mayotte", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island", "North Korea", "North Macedonia", "Northern Mariana Islands", "Norway", "Oman", "Pakistan", "Palau", "Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn Islands", "Poland", "Portugal", "Puerto Rico", "Qatar", "Republic of the Congo", "Romania", "Russia", "Rwanda", "Réunion", "Saint Barthélemy", "Saint Helena, Ascension and Tristan da Cunha", "Saint Kitts and Nevis", "Saint Lucia", "Saint Martin", "Saint Pierre and Miquelon", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Sint Maarten", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Georgia", "South Korea", "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Svalbard and Jan Mayen", "Sweden", "Switzerland", "Syria", "São Tomé and Príncipe", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor-Leste", "Togo", "Tokelau", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks and Caicos Islands", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "United States Minor Outlying Islands", "United States Virgin Islands", "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam", "Wallis and Futuna", "Western Sahara", "Yemen", "Zambia", "Zimbabwe"];
return (
<View>
<Text style={styles.break}>Country-Picker:</Text>
<Picker
name="countries"
select={['Choose a country', ...countries]}
value="Choose a country"
defaultValue="Choose a country"
style={[styles.picker, styles.break]}
/>
<Text style={styles.break}>Country-FormList:</Text>
<FormList
name="countries"
select={countries}
style={[styles.formlist, styles.break]}
/>
</View>
)
};
const styles = StyleSheet.create({
page: {
padding: 60
},
picker: {
height: '20px'
},
formlist: {
height: '100px'
},
break: {
marginBottom: 10
}
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Combos />
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/polygon.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg height="210" width="500">
<Polygon
points="200,10 250,190 160,210"
fill="tomato"
stroke="gray"
strokeWidth={1}
/>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/polyline.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg height="200" width="500">
<Polyline
points="20,20 40,25 60,40 80,120 120,140 200,180"
stroke="black"
strokeWidth={3}
/>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/quick-start.txt
================================================
// import React from 'react';
// import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
}
});
// Create Document Component
const MyDocument = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
ReactPDF.render(<MyDocument />);
================================================
FILE: examples/radialgradient.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg viewBox="0 0 10 20" width="170">
<Defs>
<RadialGradient id="myRadialGradient">
<Stop offset="10%" stopColor="gold" />
<Stop offset="95%" stopColor="red" />
</RadialGradient>
</Defs>
<Circle cx="5" cy="14" r="4" fill="url('#myRadialGradient')" />
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/rect.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg viewBox="0 0 220 100">
<Rect
width="100"
height="100"
fill="black"
/>
<Rect
x="120"
rx="15"
ry="15"
width="100"
height="100"
fill="black"
/>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/resume.txt
================================================
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
'@media max-width: 400': {
flexDirection: 'column',
},
},
image: {
marginBottom: 10,
'@media max-width: 400': {
width: 290,
},
},
title: {
fontSize: 14,
marginBottom: 10,
textTransform: 'uppercase',
},
leftColumn: {
flexDirection: 'column',
width: 170,
marginLeft: 30,
marginRight: 15,
marginTop: 20,
'@media max-width: 400': {
width: 290,
marginRight: 30,
},
'@media orientation: landscape': {
width: 200,
marginRight: 50,
},
},
rightColumn: {
flexDirection: 'column',
flexGrow: 1,
marginLeft: 15,
marginRight: 30,
marginTop: 20,
'@media max-width: 400': {
marginTop: 10,
marginLeft: 30,
},
},
footer: {
fontSize: 12,
textAlign: 'center',
marginTop: 25,
marginHorizontal: 30,
paddingVertical: 10,
borderWidth: 3,
borderColor: 'gray',
borderStyle: 'dashed',
'@media orientation: landscape': {
marginTop: 10,
},
},
item: {
flexDirection: 'row',
marginBottom: 5,
},
itemLeftColumn: {
flexDirection: 'column',
marginRight: 10,
},
itemRightColumn: {
flexDirection: 'column',
flexGrow: 9,
},
bulletPoint: {
fontSize: 10,
},
itemContent: {
fontSize: 10,
fontFamily: 'Lato',
},
headerContainer: {
flexDirection: 'row',
marginTop: 30,
marginLeft: 30,
marginRight: 30,
marginBottom: 0,
borderBottomWidth: 2,
borderBottomColor: '#112131',
borderBottomStyle: 'solid',
alignItems: 'stretch',
},
detailColumn: {
flexDirection: 'column',
flexGrow: 9,
},
linkColumn: {
flexDirection: 'column',
flexGrow: 2,
alignSelf: 'flex-end',
justifySelf: 'flex-end',
},
name: {
fontSize: 24,
textTransform: 'uppercase',
},
subtitle: {
fontSize: 10,
justifySelf: 'flex-end',
textTransform: 'uppercase',
},
link: {
fontSize: 10,
color: 'black',
textDecoration: 'none',
alignSelf: 'flex-end',
justifySelf: 'flex-end',
},
educationContainer: {
marginBottom: 10,
},
school: {
fontSize: 10,
},
degree: {
fontSize: 10,
},
candidate: {
fontSize: 10,
},
skillTitle: {
fontSize: 11,
marginBottom: 10,
},
skills: {
fontSize: 10,
marginBottom: 10,
},
experienceContainer: {
marginBottom: 10,
},
date: {
fontSize: 11,
},
detailContainer: {
flexDirection: 'row',
},
detailLeftColumn: {
flexDirection: 'column',
marginLeft: 10,
marginRight: 10,
},
detailRightColumn: {
flexDirection: 'column',
flexGrow: 9,
},
bulletPoint: {
fontSize: 10,
},
details: {
fontSize: 10,
},
headerContainer: {
flexDirection: 'row',
},
experienceLeftColumn: {
flexDirection: 'column',
flexGrow: 9,
},
experienceRightColumn: {
flexDirection: 'column',
flexGrow: 1,
alignItems: 'flex-end',
justifySelf: 'flex-end',
},
experienceTitle: {
fontSize: 11,
color: 'black',
textDecoration: 'none',
},
});
const Header = () => (
<View style={styles.headerContainer}>
<View style={styles.detailColumn}>
<Text style={styles.name}>Luke Skywalker</Text>
<Text style={styles.subtitle}>Jedi Master</Text>
</View>
<View style={styles.linkColumn}>
<Link style={styles.link}>luke@theforce.com</Link>
</View>
</View>
);
const Title = ({ children }) => <Text style={styles.title}>{children}</Text>;
const List = ({ children }) => children;
const Item = ({ children }) => (
<View style={styles.item}>
<View style={styles.itemLeftColumn}>
<Text style={styles.bulletPoint}>•</Text>
</View>
<View style={styles.itemRightColumn}>
<Text style={styles.itemContent}>{children}</Text>
</View>
</View>
);
const Education = () => (
<View style={styles.educationContainer}>
<Title>Education</Title>
<Text style={styles.school}>Jedi Academy</Text>
<Text style={styles.degree}>Jedi Master</Text>
<Text style={styles.candidate}>A long, long time ago</Text>
</View>
);
const SkillEntry = ({ name, skills }) => (
<View>
<Text style={styles.skillTitle}>{name}</Text>
<List>{skills.map((skill, i) => <Item key={i}>{skill}</Item>)}</List>
</View>
);
const Skills = () => (
<View>
<Title>Skills</Title>
<SkillEntry
name="Combat Abilities"
skills={[
'Completed Jedi Master training and built a lightsaber from scratch in order to do battle against the Empire',
'Defeated the Rancor and rescued Princess Leia from Jabba the Hutt',
'Competent fighter pilot as well as an excelent shot with nearly any weapon',
]}
/>
</View>
);
const ExperienceEntry = ({ company, details, position, date }) => {
const title = `${company} | ${position}`;
return (
<View style={styles.experienceContainer}>
<View style={styles.headerContainer}>
<View style={styles.experienceLeftColumn}>
<Text style={styles.experienceTitle}>{title}</Text>
</View>
<View style={styles.experneiceRightColumn}>
<Text style={styles.date}>{date}</Text>
</View>
</View>
<List>
{details.map((detail, i) => (
<Item key={i} style={styles.detailContainer}>
{detail}
</Item>
))}
</List>
</View>
);
};
const Experience = () => (
<View>
<Title>Experience</Title>
<ExperienceEntry
company="Jedi Temple, Coruseant"
date="A long, long time ago"
details={[
'Started a new Jedi Temple in order to train the next generation of Jedi Masters',
'Discovered and trained a new generation of Jedi Knights, which he recruited from within the New Republic',
'Comunees with decesased Jedi Masters such as Anakin Skywalker, Yoda, Obi-Wan Kenobi in order to learn the secrets of the Jedi Order',
]}
position="Head Jedi Master"
/>
<ExperienceEntry
company="Revel Alliance"
date="A long, long time ago"
details={[
'Lead legions of troops into battle while demostrating bravery, competence and honor',
'Created complicated battle plans in conjunction with other Rebel leaders in order to ensure the greatest chance of success',
'Defeated Darth Vader in single-combat, and convinced him to betray his mentor, the Emperor',
]}
position="General"
/>
<ExperienceEntry
company="Revel Alliance"
date="A long, long time ago"
details={[
'Destroyed the Death Star by using the force to find its only weakness and delivering a torpedo into the center of the ship',
'Commander of squadron of TIE-fighters into battle',
'Defeated an enemy AT-AT single handedly after his ship was destroyed',
'Awarded a medal for valor and bravery in battle for his successful destruction of the Death Star',
]}
position="Lieutenant Commander"
/>
<ExperienceEntry
company="Tatooine Moisture Refinery"
date="A long, long time ago"
details={[
'Replaced damaged power convereters',
'Performed menial labor thoughout the farm in order to ensure its continued operation',
]}
position="Mousture Farmer"
/>
</View>
);
const resume = (
<Page size="A4">
<Header />
<View style={styles.container}>
<View style={styles.leftColumn}>
<Image
src="https://images.gr-assets.com/characters/1264613782p8/1783.jpg"
style={styles.image}
/>
<Education />
<Skills />
</View>
<View style={styles.rightColumn}>
<Experience />
</View>
</View>
<Text style={styles.footer}>This IS the candidate you are looking for</Text>
</Page>
);
ReactPDF.render(resume);
================================================
FILE: examples/styles.txt
================================================
const styles = StyleSheet.create({
page: { backgroundColor: 'tomato' },
section: { color: 'white', textAlign: 'center', margin: 30 }
});
const doc = (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/svg.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const Tiger = () => (
<Svg style={{ width: 400, height: 400 }}>
<G transform="scale(1) translate(100,10)">
<Polygon
fill="#f2cc99"
points=" 69,18 82,8 99,3 118,5 135,12 149,21 156,13 165,9 177,13 183,28 180,50 164,91 155,107 154,114 151,121 141,127 139,136 155,206 157,251 126,342 133,357 128,376 83,376 75,368 67,350 61,350 53,369 4,369 2,361 5,354 12,342 16,321 4,257 4,244 7,218 9,179 26,127 43,93 32,77 30,70 24,67 16,49 17,35 18,23 30,12 40,7 53,7 62,12"
/>
<Polygon
fill="#e5b27f"
points=" 142,79 136,74 138,82 133,78 133,84 127,78 128,85 124,80 125,87 119,82 119,90 125,99 125,96 128,100 128,94 131,98 132,93 135,97 136,93 138,97 139,94 141,98 143,94 144,85"
/>
<Polygon fill="#eb8080" points=" 127,101 132,100 137,99 144,101 143,105 135,110" />
<Polygon
fill="#f2cc99"
points=" 178,229 157,248 139,296 126,349 137,356 158,357 183,342 212,332 235,288 235,261 228,252 212,250 188,251"
/>
<G fill="#9c826b">
<Polygon points=" 56,229 48,241 48,250 57,281 63,325 71,338 81,315 76,321 79,311 83,301 75,308 80,298 73,303 76,296 71,298 74,292 69,293 74,284 78,278 71,278 74,274 68,273 70,268 66,267 68,261 60,266 62,259 65,253 57,258 59,251 55,254 55,248 60,237 54,240 58,234 54,236" />
<Polygon points=" 74,363 79,368 81,368 85,362 89,363 92,370 96,373 101,372 108,361 110,371 113,373 116,371 120,358 122,363 123,371 126,371 129,367 132,357 135,361 130,376 127,377 94,378 84,376 76,371" />
<Polygon points=" 212,250 219,251 228,258 236,270 235,287 225,304 205,332 177,343 171,352 158,357 166,352 168,346 168,339 165,333 155,327 155,323 161,320 165,316 169,316 167,312 171,313 168,308 173,309 170,306 177,306 175,308 177,311 174,311 176,316 171,315 174,319 168,320 168,323 175,327 179,332 183,326 184,332 189,323 190,328 194,320 194,325 199,316 201,320 204,313 206,316 208,310 211,305 219,298 226,288 229,279 228,266 224,259 217,253" />
<Polygon points=" 151,205 151,238 149,252 141,268 128,282 121,301 130,300 126,313 118,324 116,337 120,346 133,352 133,340 137,333 145,329 156,327 153,319 153,291 157,271 170,259 178,277 193,250 174,216" />
<Polygon points=" 78,127 90,142 95,155 108,164 125,167 139,175 150,206 152,191 141,140 121,148 100,136" />
<Polygon points=" 21,58 35,63 38,68 32,69 42,74 40,79 47,80 54,83 45,94 34,81 32,73 24,66" />
<Polygon points=" 71,34 67,34 66,27 59,24 54,17 48,17 39,22 30,26 28,31 31,39 38,46 29,45 36,54 41,61 41,70 50,69 54,71 55,58 67,52 76,43 76,39 68,44" />
<Polygon points=" 139,74 141,83 143,89 144,104 148,104 155,106 154,86 157,77 155,72 150,77 144,77" />
<Polygon points=" 105,44 102,53 108,58 111,62 112,55" />
<Polygon points=" 141,48 141,54 144,58 139,62 137,66 136,59 137,52" />
<Polygon points=" 98,135 104,130 105,134 108,132 108,135 112,134 113,137 116,136 116,139 119,139 124,141 128,140 133,138 140,133 139,140 126,146 104,144" />
<Polygon points=" 97,116 103,119 103,116 111,118 116,117 122,114 127,107 135,111 142,107 141,114 145,118 149,121 145,125 140,124 127,121 113,125 100,124" />
<Polygon points=" 147,33 152,35 157,34 153,31 160,31 156,28 161,28 159,24 163,25 163,21 165,22 170,23 167,17 172,21 174,18 175,23 176,22 177,28 177,33 174,37 176,39 174,44 171,49 168,53 164,57 159,68 156,70 154,60 150,51 146,43 144,35" />
<Polygon points=" 85,72 89,74 93,75 100,76 105,75 102,79 94,79 88,76" />
<Polygon points=" 86,214 79,221 76,232 82,225 78,239 82,234 78,245 81,243 79,255 84,250 84,267 87,254 90,271 90,257 95,271 93,256 95,249 92,252 93,243 89,253 89,241 86,250 87,236 83,245 87,231 82,231 90,219 84,221" />
</G>
<G fill="#ffcc7f">
<Polygon points=" 93,68 96,72 100,73 106,72 108,66 105,63 100,62" />
<Polygon points=" 144,64 142,68 142,73 146,74 150,73 154,64 149,62" />
</G>
<G fill="#9c826b">
<Polygon points=" 57,91 42,111 52,105 41,117 53,112 46,120 53,116 50,124 57,119 55,127 61,122 60,130 67,126 66,134 71,129 72,136 77,130 76,137 80,133 82,138 86,135 96,135 94,129 86,124 83,117 77,123 79,117 73,120 75,112 68,116 71,111 65,114 69,107 63,110 68,102 61,107 66,98 61,103 63,97 57,99" />
<Polygon points=" 83,79 76,79 67,82 75,83 65,88 76,87 65,92 76,91 68,96 77,95 70,99 80,98 72,104 80,102 76,108 85,103 92,101 87,98 93,96 86,94 91,93 85,91 93,89 99,89 105,93 107,85 102,82 92,80" />
<Polygon points=" 109,77 111,83 109,89 113,94 117,90 117,81 114,78" />
<Polygon points=" 122,128 127,126 134,127 136,129 134,130 130,128 124,129" />
<Polygon points=" 78,27 82,32 80,33 82,36 78,37 82,40 78,42 81,46 76,47 78,49 74,50 82,52 87,50 83,48 91,46 86,45 91,42 88,40 92,37 86,34 90,31 86,29 89,26" />
<Polygon points=" 82,17 92,20 79,21 90,25 81,25 94,28 93,26 101,30 101,26 107,33 108,28 111,40 113,34 115,45 117,39 119,54 121,46 124,58 126,47 129,59 130,49 134,58 133,44 137,48 133,37 137,40 133,32 126,20 135,26 132,19 138,23 135,17 142,18 132,11 116,6 94,6 78,11 92,12 80,14 90,16" />
<Polygon points=" 142,234 132,227 124,223 115,220 110,225 118,224 127,229 135,236 122,234 115,237 113,242 121,238 139,243 121,245 111,254 95,254 102,244 104,235 110,229 100,231 104,224 113,216 122,215 132,217 141,224 145,230 149,240" />
<Polygon points=" 115,252 125,248 137,249 143,258 134,255 125,254" />
<Polygon points=" 114,212 130,213 140,219 147,225 144,214 137,209 128,207" />
<Polygon points=" 102,263 108,258 117,257 131,258 116,260 109,265" />
<Polygon points=" 51,241 35,224 40,238 23,224 31,242 19,239 28,247 17,246 25,250 37,254 39,263 44,271 47,294 48,317 51,328 60,351 60,323 53,262 47,246" />
<Polygon points=" 2,364 9,367 14,366 18,355 20,364 26,366 31,357 35,364 39,364 42,357 47,363 53,360 59,357 54,369 7,373" />
<Polygon points=" 7,349 19,345 25,339 18,341 23,333 28,326 23,326 27,320 23,316 25,311 20,298 15,277 12,264 9,249 10,223 3,248 5,261 15,307 17,326 11,343" />
<Polygon points=" 11,226 15,231 25,236 18,227" />
<Polygon points=" 13,214 19,217 32,227 23,214 16,208 15,190 24,148 31,121 24,137 14,170 8,189" />
<Polygon points=" 202,254 195,258 199,260 193,263 197,263 190,268 196,268 191,273 188,282 200,272 194,272 201,266 197,265 204,262 200,258 204,256" />
</G>
<G fill="#845433">
<Polygon points=" 151,213 165,212 179,225 189,246 187,262 179,275 176,263 177,247 171,233 163,230 165,251 157,264 146,298 145,321 133,326 143,285 154,260 153,240" />
<Polygon points=" 91,132 95,145 97,154 104,148 107,155 109,150 111,158 115,152 118,159 120,153 125,161 126,155 133,164 132,154 137,163 137,152 142,163 147,186 152,192 148,167 141,143 124,145 105,143" />
</G>
<G fill="#9c826b">
<Polygon points=" 31,57 23,52 26,51 20,44 23,42 21,36 22,29 25,23 24,32 30,43 26,41 30,50 26,48" />
<Polygon points=" 147,21 149,28 155,21 161,16 167,14 175,15 173,11 161,9" />
<Polygon points=" 181,39 175,51 169,57 171,65 165,68 165,75 160,76 162,91 171,71 180,51" />
<Polygon points=" 132,346 139,348 141,346 142,341 147,342 143,355 133,350" />
<Polygon points=" 146,355 151,352 155,348 157,343 160,349 151,356 147,357" />
<Polygon points=" 99,266 100,281 94,305 86,322 78,332 72,346 73,331 91,291" />
<Polygon points=" 20,347 32,342 45,340 54,345 45,350 42,353 38,350 31,353 29,356 23,350 19,353 15,349" />
<Polygon points=" 78,344 86,344 92,349 88,358 84,352" />
<Polygon points=" 93,347 104,344 117,345 124,354 121,357 116,351 112,351 108,355 102,351" />
</G>
<G fill="#000000">
<Polygon points=" 105,12 111,18 113,24 113,29 119,34 116,23 112,16" />
<Polygon points=" 122,27 125,34 127,43 128,34 125,29" />
<Polygon points=" 115,13 122,19 122,15 113,10" />
</G>
<G fill="#ffe5b2">
<Polygon points=" 116,172 107,182 98,193 98,183 90,199 89,189 84,207 88,206 87,215 95,206 93,219 91,230 98,216 97,226 104,214 112,209 104,208 113,202 126,200 139,207 132,198 142,203 134,192 142,195 134,187 140,185 130,181 136,177 126,177 125,171 116,180" />
<Polygon points=" 74,220 67,230 67,221 59,235 63,233 60,248 70,232 65,249 71,243 67,256 73,250 69,262 73,259 71,267 76,262 72,271 78,270 76,275 82,274 78,290 86,279 86,289 92,274 88,275 87,264 82,270 82,258 77,257 78,247 73,246 77,233 72,236" />
<Polygon points=" 133,230 147,242 148,250 145,254 138,247 129,246 142,245 138,241 128,237 137,238" />
<Polygon points=" 133,261 125,261 116,263 111,267 125,265" />
<Polygon points=" 121,271 109,273 103,279 99,305 92,316 85,327 83,335 89,340 97,341 94,336 101,336 96,331 103,330 97,327 108,325 99,322 109,321 100,318 110,317 105,314 110,312 107,310 113,308 105,306 114,303 105,301 115,298 107,295 115,294 108,293 117,291 109,289 117,286 109,286 118,283 112,281 118,279 114,278 119,276 115,274" />
<Polygon points=" 79,364 74,359 74,353 76,347 80,351 83,356 82,360" />
<Polygon points=" 91,363 93,356 97,353 103,355 105,360 103,366 99,371 94,368" />
<Polygon points=" 110,355 114,353 118,357 117,363 113,369 111,362" />
<Polygon points=" 126,354 123,358 124,367 126,369 129,361 129,357" />
<Polygon points=" 30,154 24,166 20,182 23,194 29,208 37,218 41,210 41,223 46,214 46,227 52,216 52,227 61,216 59,225 68,213 73,219 70,207 77,212 69,200 77,202 70,194 78,197 68,187 76,182 64,182 58,175 58,185 53,177 50,186 46,171 44,182 39,167 36,172 36,162 30,166" />
<Polygon points=" 44,130 41,137 45,136 43,150 48,142 48,157 53,150 52,164 60,156 61,169 64,165 66,175 70,167 74,176 77,168 80,183 85,172 90,182 93,174 98,181 99,173 104,175 105,169 114,168 102,163 95,157 94,166 90,154 87,162 82,149 75,159 72,148 68,155 67,143 62,148 62,138 58,145 56,133 52,142 52,128 49,134 47,125" />
<Polygon points=" 13,216 19,219 36,231 22,223 16,222 22,227 12,224 13,220 16,220" />
<Polygon points=" 10,231 14,236 25,239 27,237 19,234" />
<Polygon points=" 9,245 14,242 25,245 13,245" />
<Polygon points=" 33,255 26,253 18,254 25,256 18,258 27,260 18,263 27,265 19,267 29,270 21,272 29,276 21,278 30,281 22,283 31,287 24,288 32,292 23,293 34,298 26,299 37,303 32,305 39,309 33,309 39,314 34,314 40,318 34,317 40,321 34,321 41,326 33,326 40,330 33,332 39,333 33,337 42,337 54,341 49,337 52,335 47,330 50,330 45,325 49,325 45,321 48,321 45,316 46,306 45,286 43,274 36,261" />
<Polygon points=" 7,358 9,351 14,351 17,359 11,364" />
<Polygon points=" 44,354 49,351 52,355 49,361" />
<Polygon points=" 32,357 37,353 40,358 36,361" />
<Polygon points=" 139,334 145,330 154,330 158,334 154,341 152,348 145,350 149,340 147,336 141,339 139,345 136,342 136,339" />
<Polygon points=" 208,259 215,259 212,255 220,259 224,263 225,274 224,283 220,292 208,300 206,308 203,304 199,315 197,309 195,318 193,313 190,322 190,316 185,325 182,318 180,325 172,321 178,320 176,313 186,312 180,307 188,307 184,303 191,302 186,299 195,294 187,290 197,288 192,286 201,283 194,280 203,277 198,275 207,271 200,269 209,265 204,265 212,262" />
<Polygon points=" 106,126 106,131 109,132 111,134 115,132 115,135 119,133 118,137 123,137 128,137 133,134 136,130 136,127 132,124 118,128 112,128 106,126 106,126 106,126" />
<Polygon points=" 107,114 101,110 98,102 105,97 111,98 119,102 121,108 118,112 113,115" />
<Polygon points=" 148,106 145,110 146,116 150,118 152,111 151,107" />
<Polygon points=" 80,55 70,52 75,58 63,57 72,61 57,61 67,66 57,67 62,69 54,71 61,73 54,77 63,78 53,85 60,84 56,90 69,84 63,82 75,76 70,75 77,72 72,71 78,69 72,66 81,67 78,64 82,63 80,60 86,62" />
<Polygon points=" 87,56 91,52 96,50 102,56 98,56 92,60" />
<Polygon points=" 85,68 89,73 98,76 106,74 96,73 91,70" />
<Polygon points=" 115,57 114,64 111,64 115,75 122,81 122,74 126,79 126,74 131,78 130,72 133,77 131,68 126,61 119,57" />
<Polygon points=" 145,48 143,53 147,59 151,59 150,55" />
<Polygon points=" 26,22 34,15 43,10 52,10 59,16 47,15 32,22" />
<Polygon points=" 160,19 152,26 149,34 154,33 152,30 157,30 155,26 158,27 157,23 161,23" />
</G>
<G>
<Polygon fill="#000000" points=" 98,117 105,122 109,122 105,117 113,120 121,120 130,112 128,108 123,103 123,99 128,101 132,106 135,109 142,105 142,101 145,101 145,91 148,101 145,105 136,112 135,116 143,124 148,120 150,122 142,128 133,122 121,125 112,126 103,125 100,129 96,124" />
<Polygon fill="#000000" points=" 146,118 152,118 152,115 149,115" />
<Polygon fill="#000000" points=" 148,112 154,111 154,109 149,109" />
<Polygon fill="#000000" points=" 106,112 108,115 114,116 118,114" />
<Polygon fill="#000000" points=" 108,108 111,110 116,110 119,108" />
<Polygon fill="#000000" points=" 106,104 109,105 117,106 115,104" />
<Polygon fill="#000000" points=" 50,25 41,26 34,33 39,43 49,58 36,51 47,68 55,69 54,59 61,57 74,46 60,52 67,42 57,48 61,40 54,45 60,36 59,29 48,38 52,30 47,32" />
<Polygon fill="#000000" points=" 147,34 152,41 155,49 161,53 157,47 164,47 158,43 168,44 159,40 164,37 169,37 164,33 169,34 165,28 170,30 170,25 173,29 175,27 176,32 173,36 175,39 172,42 172,46 168,49 170,55 162,57 158,63 155,58 153,50 149,46" />
<Polygon fill="#000000" points=" 155,71 159,80 157,93 157,102 155,108 150,101 149,93 154,101 152,91 151,83 155,79" />
<Polygon fill="#000000" points=" 112,78 115,81 114,91 112,87 113,82" />
<Polygon fill="#000000" points=" 78,28 64,17 58,11 47,9 36,10 28,16 21,26 18,41 20,51 23,61 33,65 28,68 37,74 36,81 43,87 48,90 43,100 40,98 39,90 31,80 30,72 22,71 17,61 14,46 16,28 23,17 33,9 45,6 54,6 65,12" />
<Polygon fill="#000000" points=" 67,18 76,9 87,5 101,2 118,3 135,8 149,20 149,26 144,19 132,12 121,9 105,7 89,8 76,14 70,20" />
<Polygon fill="#000000" points=" 56,98 48,106 56,103 47,112 56,110 52,115 57,113 52,121 62,115 58,123 65,119 63,125 69,121 68,127 74,125 74,129 79,128 83,132 94,135 93,129 85,127 81,122 76,126 75,121 71,124 71,117 66,121 66,117 62,117 64,112 60,113 60,110 57,111 61,105 57,107 60,101 55,102" />
<Polygon fill="#000000" points=" 101,132 103,138 106,134 106,139 112,136 111,142 115,139 114,143 119,142 125,145 131,142 135,138 140,134 140,129 143,135 145,149 150,171 149,184 145,165 141,150 136,147 132,151 131,149 126,152 125,150 121,152 117,148 111,152 110,148 105,149 104,145 98,150 96,138 94,132 94,130 98,132" />
<Polygon fill="#000000" points=" 41,94 32,110 23,132 12,163 6,190 7,217 5,236 3,247 9,230 12,211 12,185 18,160 26,134 35,110 43,99" />
<Polygon fill="#000000" points=" 32,246 41,250 50,257 52,267 53,295 53,323 59,350 54,363 51,365 44,366 42,360 40,372 54,372 59,366 62,353 71,352 75,335 73,330 66,318 68,302 64,294 67,288 63,286 63,279 59,275 58,267 56,262 50,247 42,235 44,246 32,236 35,244" />
<Polygon fill="#000000" points=" 134,324 146,320 159,322 173,327 179,337 179,349 172,355 158,357 170,350 174,343 170,333 163,328 152,326 134,329" />
<Polygon fill="#000000" points=" 173,339 183,334 184,338 191,329 194,332 199,323 202,325 206,318 209,320 213,309 221,303 228,296 232,289 234,279 233,269 230,262 225,256 219,253 208,252 198,252 210,249 223,250 232,257 237,265 238,277 238,291 232,305 221,323 218,335 212,342 200,349 178,348" />
<Polygon fill="#000000" points=" 165,296 158,301 156,310 156,323 162,324 159,318 162,308 162,304" />
<Polygon fill="#000000" points=" 99,252 105,244 107,234 115,228 121,228 131,235 122,233 113,235 109,246 121,239 133,243 121,243 110,251" />
<Polygon fill="#000000" points=" 117,252 124,247 134,249 136,253 126,252" />
<Polygon fill="#000000" points=" 117,218 132,224 144,233 140,225 132,219 117,218 117,218 117,218" />
<Polygon fill="#000000" points=" 122,212 134,214 143,221 141,213 132,210" />
<Polygon fill="#000000" points=" 69,352 70,363 76,373 86,378 97,379 108,379 120,377 128,378 132,373 135,361 133,358 132,366 127,375 121,374 121,362 119,367 117,374 110,376 110,362 107,357 106,371 104,375 97,376 90,375 90,368 86,362 83,364 86,369 85,373 78,370 73,362 71,351" />
<Polygon fill="#000000" points=" 100,360 96,363 99,369 102,364" />
<Polygon fill="#000000" points=" 115,360 112,363 114,369 117,364" />
<Polygon fill="#000000" points=" 127,362 125,364 126,369 128,365" />
<Polygon fill="#000000" points=" 5,255 7,276 11,304 15,320 13,334 6,348 2,353 0,363 5,372 12,374 25,372 38,372 44,369 42,367 36,368 31,369 30,360 27,368 20,370 16,361 15,368 10,369 3,366 3,359 6,352 11,348 17,331 19,316 12,291 9,274" />
<Polygon fill="#000000" points=" 10,358 7,362 10,366 11,362" />
<Polygon fill="#000000" points=" 25,357 22,360 24,366 27,360" />
<Polygon fill="#000000" points=" 37,357 34,361 36,365 38,361" />
<Polygon fill="#000000" points=" 49,356 46,359 47,364 50,360" />
<Polygon fill="#000000" points=" 130,101 132,102 135,101 139,102 143,103 142,101 137,100 133,100" />
<Polygon fill="#000000" points=" 106,48 105,52 108,56 109,52" />
<Polygon fill="#000000" points=" 139,52 139,56 140,60 142,58 141,56" />
<Polygon fill="#000000" points=" 25,349 29,351 30,355 33,350 37,348 42,351 45,347 49,345 44,343 36,345" />
<Polygon fill="#000000" points=" 98,347 105,351 107,354 109,349 115,349 120,353 118,349 113,346 104,346" />
<Polygon fill="#000000" points=" 83,348 87,352 87,357 89,351 87,348" />
<Polygon fill="#000000" points=" 155,107 163,107 170,107 186,108 175,109 155,109" />
<Polygon fill="#000000" points=" 153,114 162,113 175,112 192,114 173,114 154,115" />
<Polygon fill="#000000" points=" 152,118 164,120 180,123 197,129 169,123 151,120" />
<Polygon fill="#000000" points=" 68,109 87,106 107,106 106,108 88,108" />
<Polygon fill="#000000" points=" 105,111 95,112 79,114 71,116 85,115 102,113" />
<Polygon fill="#000000" points=" 108,101 98,99 87,99 78,99 93,100 105,102" />
<Polygon fill="#000000" points=" 85,63 91,63 97,60 104,60 108,62 111,69 112,75 110,74 108,71 103,73 106,69 105,65 103,64 103,67 102,70 99,70 97,66 94,67 97,72 88,67 84,66" />
<Polygon fill="#000000" points=" 140,74 141,66 144,61 150,61 156,62 153,70 150,73 152,65 150,65 151,68 149,71 146,71 144,66 143,70 143,74" />
<Polygon fill="#000000" points=" 146,20 156,11 163,9 172,9 178,14 182,18 184,32 182,42 182,52 177,58 176,67 171,76 165,90 157,105 160,92 164,85 168,78 167,73 173,66 172,62 175,59 174,55 177,53 180,46 181,29 179,21 173,13 166,11 159,13 153,18 148,23" />
<Polygon fill="#000000" points=" 150,187 148,211 150,233 153,247 148,267 135,283 125,299 136,292 131,313 122,328 122,345 129,352 133,359 133,367 137,359 148,356 140,350 131,347 129,340 132,332 140,328 137,322 140,304 154,265 157,244 155,223 161,220 175,229 186,247 185,260 176,275 178,287 185,277 188,261 196,253 189,236 174,213" />
<Polygon fill="#000000" points=" 147,338 142,341 143,345 141,354 147,343" />
<Polygon fill="#000000" points=" 157,342 156,349 150,356 157,353 163,346 162,342" />
<Polygon fill="#000000" points=" 99,265 96,284 92,299 73,339 73,333 87,300" />
</G>
</G>
</Svg>
)
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Tiger />
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/svgtext.txt
================================================
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg viewBox="0 0 240 40">
<Text x="10" y="30">
React-pdf is cool
</Text>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/text.txt
================================================
const styles = StyleSheet.create({
title: {
margin: 20,
fontSize: 25,
textAlign: 'center',
backgroundColor: '#e4e4e4',
textDecoration: 'underline',
textTransform: 'uppercase',
},
body: {
flexGrow: 1,
},
row: {
flexGrow: 1,
flexDirection: 'row',
},
block: {
flexGrow: 1,
},
text: {
flexGrow: 3,
margin: 10,
},
fill1: {
flexGrow: 2,
backgroundColor: '#e14427',
},
fill2: {
flexGrow: 2,
backgroundColor: '#e6672d',
},
fill3: {
flexGrow: 2,
backgroundColor: '#e78632',
},
fill4: {
flexGrow: 2,
backgroundColor: '#e29e37',
},
});
const doc = (
<Document>
<Page size="A4">
<Link
style={styles.title}
src="https://es.wikipedia.org/wiki/Lorem_ipsum"
>
Lorem Ipsum
</Link>
<View style={styles.body}>
<View style={styles.row}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum.
</Text>
<View style={styles.fill1} />
</View>
<View style={styles.row}>
<View style={styles.fill2} />
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum.
</Text>
</View>
<View style={styles.row}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum.
</Text>
<View style={styles.fill3} />
</View>
<View style={styles.row}>
<View style={styles.fill4} />
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum.
</Text>
</View>
</View>
</Page>
</Document>
);
ReactPDF.render(doc);
================================================
FILE: examples/textinput.txt
================================================
const UserInformation = () => (
<View>
<Text style={styles.heading}>User Information</Text>
<View style={styles.verticalFlex}>
<Vie
gitextract_fs2i479s/
├── .babelrc.js
├── .gitignore
├── .nvmrc
├── blog/
│ └── announcing-react-pdf-v2.md
├── docs/
│ ├── advanced.md
│ ├── compatibility.md
│ ├── components.md
│ ├── debugging.md
│ ├── document-navigation.md
│ ├── dynamic-content.md
│ ├── express.md
│ ├── fonts.md
│ ├── form.md
│ ├── hooks.md
│ ├── hyphenation.md
│ ├── math.md
│ ├── node.md
│ ├── on-the-fly.md
│ ├── orphan-widow-protection.md
│ ├── page-wrapping.md
│ ├── quick-start.md
│ ├── rendering-process.md
│ ├── styling.md
│ ├── svg.md
│ └── web-workers.md
├── env-config.js
├── examples/
│ ├── breakable-unbreakable.txt
│ ├── checkbox.txt
│ ├── circle.txt
│ ├── clippath.txt
│ ├── debugging.txt
│ ├── disable-hyphenation.txt
│ ├── disable-wrapping.txt
│ ├── ellipse.txt
│ ├── emoji.txt
│ ├── fixed-components.txt
│ ├── font-register.txt
│ ├── formfield.txt
│ ├── fractals.txt
│ ├── g.txt
│ ├── hyphenation-callback.txt
│ ├── images.txt
│ ├── inline-styles.txt
│ ├── knobs.txt
│ ├── line.txt
│ ├── lineargradient.txt
│ ├── math.txt
│ ├── media-queries.txt
│ ├── mixed-styles.txt
│ ├── orphans-and-widows.txt
│ ├── page-breaks.txt
│ ├── page-numbers.txt
│ ├── page-wrap.txt
│ ├── path.txt
│ ├── picker-formlist.txt
│ ├── polygon.txt
│ ├── polyline.txt
│ ├── quick-start.txt
│ ├── radialgradient.txt
│ ├── rect.txt
│ ├── resume.txt
│ ├── styles.txt
│ ├── svg.txt
│ ├── svgtext.txt
│ ├── text.txt
│ └── textinput.txt
├── next.config.js
├── next.config_old.js
├── now.json
├── package.json
├── pages/
│ ├── _app.js
│ ├── _document.js
│ ├── advanced.js
│ ├── blog/
│ │ └── [slug].js
│ ├── compatibility.js
│ ├── components.js
│ ├── fonts.js
│ ├── form.js
│ ├── hooks.js
│ ├── index.js
│ ├── node.js
│ ├── rendering-process.js
│ ├── repl.js
│ ├── styling.js
│ └── svg.js
├── prettier.config.js
├── public/
│ ├── favicons/
│ │ ├── browserconfig.xml
│ │ └── site.webmanifest
│ ├── scripts/
│ │ └── pdf.worker.js
│ └── styles/
│ ├── codemirror.css
│ ├── fonts.css
│ ├── index.css
│ ├── prism.css
│ └── tooltips.css
└── src/
├── components/
│ ├── Docs/
│ │ ├── DebugSample/
│ │ │ ├── DebugSample.js
│ │ │ └── index.js
│ │ ├── EditButton/
│ │ │ ├── EditButton.js
│ │ │ └── index.js
│ │ ├── GoToExample/
│ │ │ ├── GoToExample.js
│ │ │ └── index.js
│ │ ├── NavigationButtons/
│ │ │ ├── NavigationButtons.js
│ │ │ └── index.js
│ │ └── OverviewTimeline/
│ │ ├── OverviewTimeline.js
│ │ └── index.js
│ ├── Layout/
│ │ ├── GitHubIcon.js
│ │ ├── Header.js
│ │ ├── Layout.js
│ │ ├── Menu.js
│ │ ├── VersionPicker.js
│ │ └── index.js
│ ├── Repl/
│ │ ├── BackButton.js
│ │ ├── Catch.js
│ │ ├── CodeEditor.js
│ │ ├── ErrorMessage.js
│ │ ├── PDFViewer.js
│ │ ├── PageNavigator.js
│ │ ├── Repl.js
│ │ ├── ReplFooter.js
│ │ ├── ReplHeader.js
│ │ └── index.js
│ └── UI/
│ ├── Blockquote/
│ │ ├── Blockquote.js
│ │ └── index.js
│ ├── Button/
│ │ ├── Button.js
│ │ └── index.js
│ ├── Clipboard/
│ │ ├── Clipboard.js
│ │ └── index.js
│ ├── CodeBlock/
│ │ ├── CodeBlock.js
│ │ └── index.js
│ ├── Heading/
│ │ ├── Heading.js
│ │ └── index.js
│ ├── Icon/
│ │ ├── Icon.js
│ │ └── index.js
│ ├── InlineCode/
│ │ ├── InlineCode.js
│ │ └── index.js
│ ├── Link/
│ │ ├── Link.js
│ │ └── index.js
│ ├── List/
│ │ ├── List.js
│ │ └── index.js
│ ├── ListItem/
│ │ ├── ListItem.js
│ │ └── index.js
│ ├── Logo/
│ │ ├── Logo.js
│ │ └── index.js
│ ├── PageBanner/
│ │ ├── PageBanner.js
│ │ └── index.js
│ ├── Paragraph/
│ │ ├── Paragraph.js
│ │ └── index.js
│ ├── Spinner/
│ │ ├── Spinner.js
│ │ └── index.js
│ ├── Table/
│ │ ├── Table.js
│ │ └── index.js
│ ├── ThematicBreak/
│ │ ├── ThematicBreak.js
│ │ └── index.js
│ └── Title/
│ ├── Title.js
│ └── index.js
├── lib/
│ ├── compress.js
│ ├── markdown.js
│ ├── toLowerCase.js
│ └── transpile.js
└── styled/
├── media.js
└── theme.js
SYMBOL INDEX (654 symbols across 9 files)
FILE: pages/_app.js
class MyApp (line 23) | class MyApp extends App {
method render (line 24) | render() {
FILE: pages/_document.js
class MyDocument (line 5) | class MyDocument extends Document {
method getInitialProps (line 6) | static async getInitialProps(ctx) {
method render (line 23) | render() {
FILE: pages/blog/[slug].js
constant BLOG_POSTS (line 12) | const BLOG_POSTS = {
FILE: pages/repl.js
constant NAV_WIDTH (line 62) | const NAV_WIDTH = 64;
FILE: public/scripts/pdf.worker.js
function __w_pdfjs_require__ (line 38) | function __w_pdfjs_require__(moduleId) {
function sliceIterator (line 145) | function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = ...
function _interopRequireDefault (line 159) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function WorkerTask (line 162) | function WorkerTask(name) {
method finished (line 168) | get finished() {
function PDFWorkerStream (line 187) | function PDFWorkerStream(msgHandler) {
function PDFWorkerStreamReader (line 214) | function PDFWorkerStreamReader(msgHandler) {
method headersReady (line 230) | get headersReady() {
method contentLength (line 233) | get contentLength() {
method isStreamingSupported (line 236) | get isStreamingSupported() {
method isRangeSupported (line 239) | get isRangeSupported() {
function PDFWorkerStreamRangeReader (line 263) | function PDFWorkerStreamRangeReader(begin, end, msgHandler) {
method isStreamingSupported (line 273) | get isStreamingSupported() {
function ensureNotTerminated (line 351) | function ensureNotTerminated() {
function startWorkerTask (line 356) | function startWorkerTask(task) {
function finishWorkerTask (line 359) | function finishWorkerTask(task) {
function loadDocument (line 364) | function loadDocument(recoveryMode) {
function getPdfManager (line 388) | function getPdfManager(data, evaluatorOptions) {
function setupDoc (line 487) | function setupDoc(data) {
function isMessagePort (line 721) | function isMessagePort(maybePort) {
function setVerbosityLevel (line 970) | function setVerbosityLevel(level) {
function getVerbosityLevel (line 975) | function getVerbosityLevel() {
function info (line 978) | function info(msg) {
function warn (line 983) | function warn(msg) {
function deprecated (line 988) | function deprecated(details) {
function unreachable (line 991) | function unreachable(msg) {
function assert (line 994) | function assert(cond, msg) {
function isSameOrigin (line 1007) | function isSameOrigin(baseUrl, otherUrl) {
function isValidProtocol (line 1019) | function isValidProtocol(url) {
function createValidAbsoluteUrl (line 1034) | function createValidAbsoluteUrl(url, baseUrl) {
function shadow (line 1046) | function shadow(obj, prop, value) {
function getLookupTableFactory (line 1055) | function getLookupTableFactory(initializer) {
function PasswordException (line 1071) | function PasswordException(msg, code) {
function UnknownErrorException (line 1081) | function UnknownErrorException(msg, details) {
function InvalidPDFException (line 1091) | function InvalidPDFException(msg) {
function MissingPDFException (line 1100) | function MissingPDFException(msg) {
function UnexpectedResponseException (line 1109) | function UnexpectedResponseException(msg, status) {
function MissingDataException (line 1119) | function MissingDataException(begin, end) {
function XRefParseException (line 1130) | function XRefParseException(msg) {
function FormatError (line 1139) | function FormatError(msg) {
function AbortException (line 1148) | function AbortException(msg) {
function removeNullCharacters (line 1157) | function removeNullCharacters(str) {
function bytesToString (line 1164) | function bytesToString(bytes) {
function stringToBytes (line 1179) | function stringToBytes(str) {
function arrayByteLength (line 1188) | function arrayByteLength(arr) {
function arraysToBytes (line 1195) | function arraysToBytes(arr) {
function string32 (line 1225) | function string32(value) {
function log2 (line 1228) | function log2(x) {
function readInt8 (line 1234) | function readInt8(data, start) {
function readUint16 (line 1237) | function readUint16(data, offset) {
function readUint32 (line 1240) | function readUint32(data, offset) {
function isLittleEndian (line 1243) | function isLittleEndian() {
function isEvalSupported (line 1249) | function isEvalSupported() {
function getInheritableProperty (line 1257) | function getInheritableProperty(_ref) {
function Util (line 1289) | function Util() {}
function compare (line 1350) | function compare(a, b) {
function toRomanNumerals (line 1375) | function toRomanNumerals(number) {
function stringToPDFString (line 1396) | function stringToPDFString(str) {
function stringToUTF8String (line 1412) | function stringToUTF8String(str) {
function utf8StringToString (line 1415) | function utf8StringToString(str) {
function isEmptyObj (line 1418) | function isEmptyObj(obj) {
function isBool (line 1424) | function isBool(v) {
function isNum (line 1427) | function isNum(v) {
function isString (line 1430) | function isString(v) {
function isArrayBuffer (line 1433) | function isArrayBuffer(v) {
function isSpace (line 1436) | function isSpace(ch) {
function createPromiseCapability (line 1439) | function createPromiseCapability() {
function PromiseCapability (line 3516) | function PromiseCapability(C) {
function __w_pdfjs_require__ (line 4343) | function __w_pdfjs_require__(moduleId) {
function IsPropertyKey (line 4392) | function IsPropertyKey(argument) {
function Call (line 4442) | function Call(F, V, args) {
function rethrowAssertionErrorRejection (line 4511) | function rethrowAssertionErrorRejection(e) {
function AssertionError (line 4518) | function AssertionError(message) {
function assert (line 4525) | function assert(value, message) {
function defineProperties (line 4539) | function defineProperties(target, props) {
function _classCallCheck (line 4554) | function _classCallCheck(instance, Constructor) {
function WritableStream (line 4573) | function WritableStream() {
function AcquireWritableStreamDefaultWriter (line 4639) | function AcquireWritableStreamDefaultWriter(stream) {
function IsWritableStream (line 4642) | function IsWritableStream(x) {
function IsWritableStreamLocked (line 4651) | function IsWritableStreamLocked(stream) {
function WritableStreamAbort (line 4658) | function WritableStreamAbort(stream, reason) {
function WritableStreamAddWriteRequest (line 4689) | function WritableStreamAddWriteRequest(stream) {
function WritableStreamDealWithRejection (line 4701) | function WritableStreamDealWithRejection(stream, error) {
function WritableStreamStartErroring (line 4710) | function WritableStreamStartErroring(stream, reason) {
function WritableStreamFinishErroring (line 4725) | function WritableStreamFinishErroring(stream) {
function WritableStreamFinishInFlightWrite (line 4756) | function WritableStreamFinishInFlightWrite(stream) {
function WritableStreamFinishInFlightWriteWithError (line 4761) | function WritableStreamFinishInFlightWriteWithError(stream, error) {
function WritableStreamFinishInFlightClose (line 4768) | function WritableStreamFinishInFlightClose(stream) {
function WritableStreamFinishInFlightCloseWithError (line 4789) | function WritableStreamFinishInFlightCloseWithError(stream, error) {
function WritableStreamCloseQueuedOrInFlight (line 4800) | function WritableStreamCloseQueuedOrInFlight(stream) {
function WritableStreamHasOperationMarkedInFlight (line 4806) | function WritableStreamHasOperationMarkedInFlight(stream) {
function WritableStreamMarkCloseRequestInFlight (line 4812) | function WritableStreamMarkCloseRequestInFlight(stream) {
function WritableStreamMarkFirstWriteRequestInFlight (line 4818) | function WritableStreamMarkFirstWriteRequestInFlight(stream) {
function WritableStreamRejectCloseAndClosedPromiseIfNeeded (line 4823) | function WritableStreamRejectCloseAndClosedPromiseIfNeeded(stream) {
function WritableStreamUpdateBackpressure (line 4836) | function WritableStreamUpdateBackpressure(stream, backpressure) {
function WritableStreamDefaultWriter (line 4851) | function WritableStreamDefaultWriter(stream) {
function IsWritableStreamDefaultWriter (line 4965) | function IsWritableStreamDefaultWriter(x) {
function WritableStreamDefaultWriterAbort (line 4974) | function WritableStreamDefaultWriterAbort(writer, reason) {
function WritableStreamDefaultWriterClose (line 4979) | function WritableStreamDefaultWriterClose(writer) {
function WritableStreamDefaultWriterCloseWithErrorPropagation (line 5001) | function WritableStreamDefaultWriterCloseWithErrorPropagation(writer) {
function WritableStreamDefaultWriterEnsureClosedPromiseRejected (line 5014) | function WritableStreamDefaultWriterEnsureClosedPromiseRejected(writer, ...
function WritableStreamDefaultWriterEnsureReadyPromiseRejected (line 5022) | function WritableStreamDefaultWriterEnsureReadyPromiseRejected(writer, e...
function WritableStreamDefaultWriterGetDesiredSize (line 5030) | function WritableStreamDefaultWriterGetDesiredSize(writer) {
function WritableStreamDefaultWriterRelease (line 5041) | function WritableStreamDefaultWriterRelease(writer) {
function WritableStreamDefaultWriterWrite (line 5051) | function WritableStreamDefaultWriterWrite(writer, chunk) {
function WritableStreamDefaultController (line 5075) | function WritableStreamDefaultController(stream, underlyingSink, size, h...
function WritableStreamDefaultControllerClose (line 5136) | function WritableStreamDefaultControllerClose(controller) {
function WritableStreamDefaultControllerGetChunkSize (line 5140) | function WritableStreamDefaultControllerGetChunkSize(controller, chunk) {
function WritableStreamDefaultControllerGetDesiredSize (line 5152) | function WritableStreamDefaultControllerGetDesiredSize(controller) {
function WritableStreamDefaultControllerWrite (line 5155) | function WritableStreamDefaultControllerWrite(controller, chunk, chunkSi...
function IsWritableStreamDefaultController (line 5170) | function IsWritableStreamDefaultController(x) {
function WritableStreamDefaultControllerAdvanceQueueIfNeeded (line 5179) | function WritableStreamDefaultControllerAdvanceQueueIfNeeded(controller) {
function WritableStreamDefaultControllerErrorIfNeeded (line 5205) | function WritableStreamDefaultControllerErrorIfNeeded(controller, error) {
function WritableStreamDefaultControllerProcessClose (line 5210) | function WritableStreamDefaultControllerProcessClose(controller) {
function WritableStreamDefaultControllerProcessWrite (line 5222) | function WritableStreamDefaultControllerProcessWrite(controller, chunk) {
function WritableStreamDefaultControllerGetBackpressure (line 5240) | function WritableStreamDefaultControllerGetBackpressure(controller) {
function WritableStreamDefaultControllerError (line 5244) | function WritableStreamDefaultControllerError(controller, error) {
function streamBrandCheckException (line 5249) | function streamBrandCheckException(name) {
function defaultWriterBrandCheckException (line 5252) | function defaultWriterBrandCheckException(name) {
function defaultWriterLockException (line 5255) | function defaultWriterLockException(name) {
function defaultWriterClosedPromiseInitialize (line 5258) | function defaultWriterClosedPromiseInitialize(writer) {
function defaultWriterClosedPromiseInitializeAsRejected (line 5265) | function defaultWriterClosedPromiseInitializeAsRejected(writer, reason) {
function defaultWriterClosedPromiseInitializeAsResolved (line 5271) | function defaultWriterClosedPromiseInitializeAsResolved(writer) {
function defaultWriterClosedPromiseReject (line 5277) | function defaultWriterClosedPromiseReject(writer, reason) {
function defaultWriterClosedPromiseResetToRejected (line 5286) | function defaultWriterClosedPromiseResetToRejected(writer, reason) {
function defaultWriterClosedPromiseResolve (line 5293) | function defaultWriterClosedPromiseResolve(writer) {
function defaultWriterReadyPromiseInitialize (line 5302) | function defaultWriterReadyPromiseInitialize(writer) {
function defaultWriterReadyPromiseInitializeAsRejected (line 5309) | function defaultWriterReadyPromiseInitializeAsRejected(writer, reason) {
function defaultWriterReadyPromiseInitializeAsResolved (line 5315) | function defaultWriterReadyPromiseInitializeAsResolved(writer) {
function defaultWriterReadyPromiseReject (line 5321) | function defaultWriterReadyPromiseReject(writer, reason) {
function defaultWriterReadyPromiseReset (line 5329) | function defaultWriterReadyPromiseReset(writer) {
function defaultWriterReadyPromiseResetToRejected (line 5338) | function defaultWriterReadyPromiseResetToRejected(writer, reason) {
function defaultWriterReadyPromiseResolve (line 5344) | function defaultWriterReadyPromiseResolve(writer) {
function defineProperties (line 5396) | function defineProperties(target, props) {
function _classCallCheck (line 5411) | function _classCallCheck(instance, Constructor) {
function ReadableStream (line 5446) | function ReadableStream() {
function pipeLoop (line 5538) | function pipeLoop() {
function waitForWritesToFinish (line 5595) | function waitForWritesToFinish() {
function isOrBecomesErrored (line 5601) | function isOrBecomesErrored(stream, promise, action) {
function isOrBecomesClosed (line 5608) | function isOrBecomesClosed(stream, promise, action) {
function shutdownWithAction (line 5615) | function shutdownWithAction(action, originalIsError, originalError) {
function shutdown (line 5633) | function shutdown(isError, error) {
function finalize (line 5646) | function finalize(isError, error) {
function AcquireReadableStreamBYOBReader (line 5685) | function AcquireReadableStreamBYOBReader(stream) {
function AcquireReadableStreamDefaultReader (line 5688) | function AcquireReadableStreamDefaultReader(stream) {
function IsReadableStream (line 5691) | function IsReadableStream(x) {
function IsReadableStreamDisturbed (line 5700) | function IsReadableStreamDisturbed(stream) {
function IsReadableStreamLocked (line 5704) | function IsReadableStreamLocked(stream) {
function ReadableStreamTee (line 5711) | function ReadableStreamTee(stream, cloneForBranch2) {
function create_ReadableStreamTeePullFunction (line 5755) | function create_ReadableStreamTeePullFunction() {
function create_ReadableStreamTeeBranch1CancelFunction (line 5790) | function create_ReadableStreamTeeBranch1CancelFunction() {
function create_ReadableStreamTeeBranch2CancelFunction (line 5805) | function create_ReadableStreamTeeBranch2CancelFunction() {
function ReadableStreamAddReadIntoRequest (line 5820) | function ReadableStreamAddReadIntoRequest(stream) {
function ReadableStreamAddReadRequest (line 5832) | function ReadableStreamAddReadRequest(stream) {
function ReadableStreamCancel (line 5844) | function ReadableStreamCancel(stream, reason) {
function ReadableStreamClose (line 5858) | function ReadableStreamClose(stream) {
function ReadableStreamError (line 5875) | function ReadableStreamError(stream, e) {
function ReadableStreamFulfillReadIntoRequest (line 5901) | function ReadableStreamFulfillReadIntoRequest(stream, chunk, done) {
function ReadableStreamFulfillReadRequest (line 5907) | function ReadableStreamFulfillReadRequest(stream, chunk, done) {
function ReadableStreamGetNumReadIntoRequests (line 5913) | function ReadableStreamGetNumReadIntoRequests(stream) {
function ReadableStreamGetNumReadRequests (line 5916) | function ReadableStreamGetNumReadRequests(stream) {
function ReadableStreamHasBYOBReader (line 5919) | function ReadableStreamHasBYOBReader(stream) {
function ReadableStreamHasDefaultReader (line 5929) | function ReadableStreamHasDefaultReader(stream) {
function ReadableStreamDefaultReader (line 5940) | function ReadableStreamDefaultReader(stream) {
function ReadableStreamBYOBReader (line 5999) | function ReadableStreamBYOBReader(stream) {
function IsReadableStreamBYOBReader (line 6066) | function IsReadableStreamBYOBReader(x) {
function IsReadableStreamDefaultReader (line 6075) | function IsReadableStreamDefaultReader(x) {
function ReadableStreamReaderGenericInitialize (line 6084) | function ReadableStreamReaderGenericInitialize(reader, stream) {
function ReadableStreamReaderGenericCancel (line 6097) | function ReadableStreamReaderGenericCancel(reader, reason) {
function ReadableStreamReaderGenericRelease (line 6102) | function ReadableStreamReaderGenericRelease(reader) {
function ReadableStreamBYOBReaderRead (line 6114) | function ReadableStreamBYOBReaderRead(reader, view) {
function ReadableStreamDefaultReaderRead (line 6123) | function ReadableStreamDefaultReaderRead(reader) {
function ReadableStreamDefaultController (line 6137) | function ReadableStreamDefaultController(stream, underlyingSource, size,...
function IsReadableStreamDefaultController (line 6244) | function IsReadableStreamDefaultController(x) {
function ReadableStreamDefaultControllerCallPullIfNeeded (line 6253) | function ReadableStreamDefaultControllerCallPullIfNeeded(controller) {
function ReadableStreamDefaultControllerShouldCallPull (line 6277) | function ReadableStreamDefaultControllerShouldCallPull(controller) {
function ReadableStreamDefaultControllerClose (line 6297) | function ReadableStreamDefaultControllerClose(controller) {
function ReadableStreamDefaultControllerEnqueue (line 6306) | function ReadableStreamDefaultControllerEnqueue(controller, chunk) {
function ReadableStreamDefaultControllerError (line 6333) | function ReadableStreamDefaultControllerError(controller, e) {
function ReadableStreamDefaultControllerErrorIfNeeded (line 6339) | function ReadableStreamDefaultControllerErrorIfNeeded(controller, e) {
function ReadableStreamDefaultControllerGetDesiredSize (line 6344) | function ReadableStreamDefaultControllerGetDesiredSize(controller) {
function ReadableStreamBYOBRequest (line 6356) | function ReadableStreamBYOBRequest(controller, view) {
function ReadableByteStreamController (line 6395) | function ReadableByteStreamController(stream, underlyingByteSource, high...
function IsReadableByteStreamController (line 6554) | function IsReadableByteStreamController(x) {
function IsReadableStreamBYOBRequest (line 6563) | function IsReadableStreamBYOBRequest(x) {
function ReadableByteStreamControllerCallPullIfNeeded (line 6572) | function ReadableByteStreamControllerCallPullIfNeeded(controller) {
function ReadableByteStreamControllerClearPendingPullIntos (line 6597) | function ReadableByteStreamControllerClearPendingPullIntos(controller) {
function ReadableByteStreamControllerCommitPullIntoDescriptor (line 6601) | function ReadableByteStreamControllerCommitPullIntoDescriptor(stream, pu...
function ReadableByteStreamControllerConvertPullIntoDescriptor (line 6616) | function ReadableByteStreamControllerConvertPullIntoDescriptor(pullIntoD...
function ReadableByteStreamControllerEnqueueChunkToQueue (line 6623) | function ReadableByteStreamControllerEnqueueChunkToQueue(controller, buf...
function ReadableByteStreamControllerFillPullIntoDescriptorFromQueue (line 6631) | function ReadableByteStreamControllerFillPullIntoDescriptorFromQueue(con...
function ReadableByteStreamControllerFillHeadPullIntoDescriptor (line 6666) | function ReadableByteStreamControllerFillHeadPullIntoDescriptor(controll...
function ReadableByteStreamControllerHandleQueueDrain (line 6671) | function ReadableByteStreamControllerHandleQueueDrain(controller) {
function ReadableByteStreamControllerInvalidateBYOBRequest (line 6679) | function ReadableByteStreamControllerInvalidateBYOBRequest(controller) {
function ReadableByteStreamControllerProcessPullIntoDescriptorsUsingQueue (line 6687) | function ReadableByteStreamControllerProcessPullIntoDescriptorsUsingQueu...
function ReadableByteStreamControllerPullInto (line 6700) | function ReadableByteStreamControllerPullInto(controller, view) {
function ReadableByteStreamControllerRespondInClosedState (line 6743) | function ReadableByteStreamControllerRespondInClosedState(controller, fi...
function ReadableByteStreamControllerRespondInReadableState (line 6754) | function ReadableByteStreamControllerRespondInReadableState(controller, ...
function ReadableByteStreamControllerRespondInternal (line 6774) | function ReadableByteStreamControllerRespondInternal(controller, bytesWr...
function ReadableByteStreamControllerShiftPendingPullInto (line 6787) | function ReadableByteStreamControllerShiftPendingPullInto(controller) {
function ReadableByteStreamControllerShouldCallPull (line 6792) | function ReadableByteStreamControllerShouldCallPull(controller) {
function ReadableByteStreamControllerClose (line 6814) | function ReadableByteStreamControllerClose(controller) {
function ReadableByteStreamControllerEnqueue (line 6832) | function ReadableByteStreamControllerEnqueue(controller, chunk) {
function ReadableByteStreamControllerError (line 6856) | function ReadableByteStreamControllerError(controller, e) {
function ReadableByteStreamControllerGetDesiredSize (line 6863) | function ReadableByteStreamControllerGetDesiredSize(controller) {
function ReadableByteStreamControllerRespond (line 6874) | function ReadableByteStreamControllerRespond(controller, bytesWritten) {
function ReadableByteStreamControllerRespondWithNewView (line 6882) | function ReadableByteStreamControllerRespondWithNewView(controller, view) {
function streamBrandCheckException (line 6894) | function streamBrandCheckException(name) {
function readerLockException (line 6897) | function readerLockException(name) {
function defaultReaderBrandCheckException (line 6900) | function defaultReaderBrandCheckException(name) {
function defaultReaderClosedPromiseInitialize (line 6903) | function defaultReaderClosedPromiseInitialize(reader) {
function defaultReaderClosedPromiseInitializeAsRejected (line 6909) | function defaultReaderClosedPromiseInitializeAsRejected(reader, reason) {
function defaultReaderClosedPromiseInitializeAsResolved (line 6914) | function defaultReaderClosedPromiseInitializeAsResolved(reader) {
function defaultReaderClosedPromiseReject (line 6919) | function defaultReaderClosedPromiseReject(reader, reason) {
function defaultReaderClosedPromiseResetToRejected (line 6926) | function defaultReaderClosedPromiseResetToRejected(reader, reason) {
function defaultReaderClosedPromiseResolve (line 6931) | function defaultReaderClosedPromiseResolve(reader) {
function byobReaderBrandCheckException (line 6938) | function byobReaderBrandCheckException(name) {
function defaultControllerBrandCheckException (line 6941) | function defaultControllerBrandCheckException(name) {
function byobRequestBrandCheckException (line 6944) | function byobRequestBrandCheckException(name) {
function byteStreamControllerBrandCheckException (line 6947) | function byteStreamControllerBrandCheckException(name) {
function ifIsObjectAndHasAPromiseIsHandledInternalSlotSetPromiseIsHandledToTrue (line 6950) | function ifIsObjectAndHasAPromiseIsHandledInternalSlotSetPromiseIsHandle...
function defineProperties (line 6981) | function defineProperties(target, props) {
function _classCallCheck (line 6996) | function _classCallCheck(instance, Constructor) {
function TransformStreamCloseReadable (line 7017) | function TransformStreamCloseReadable(transformStream) {
function TransformStreamEnqueueToReadable (line 7026) | function TransformStreamEnqueueToReadable(transformStream, chunk) {
function TransformStreamError (line 7047) | function TransformStreamError(transformStream, e) {
function TransformStreamCloseReadableInternal (line 7053) | function TransformStreamCloseReadableInternal(transformStream) {
function TransformStreamErrorIfNeeded (line 7063) | function TransformStreamErrorIfNeeded(transformStream, e) {
function TransformStreamErrorInternal (line 7068) | function TransformStreamErrorInternal(transformStream, e) {
function TransformStreamReadableReadyPromise (line 7079) | function TransformStreamReadableReadyPromise(transformStream) {
function TransformStreamSetBackpressure (line 7087) | function TransformStreamSetBackpressure(transformStream, backpressure) {
function TransformStreamDefaultTransform (line 7100) | function TransformStreamDefaultTransform(chunk, transformStreamControlle...
function TransformStreamTransform (line 7105) | function TransformStreamTransform(transformStream, chunk) {
function IsTransformStreamDefaultController (line 7121) | function IsTransformStreamDefaultController(x) {
function IsTransformStream (line 7130) | function IsTransformStream(x) {
function TransformStreamSink (line 7140) | function TransformStreamSink(transformStream, startPromise) {
function TransformStreamSource (line 7191) | function TransformStreamSource(transformStream, startPromise) {
function TransformStreamDefaultController (line 7230) | function TransformStreamDefaultController(transformStream) {
function TransformStream (line 7278) | function TransformStream() {
function defaultControllerBrandCheckException (line 7338) | function defaultControllerBrandCheckException(name) {
function streamBrandCheckException (line 7341) | function streamBrandCheckException(name) {
function isRelativeScheme (line 7406) | function isRelativeScheme(scheme) {
function invalid (line 7409) | function invalid() {
function IDNAToASCII (line 7413) | function IDNAToASCII(h) {
function percentEscape (line 7419) | function percentEscape(c) {
function percentEscapeQuery (line 7426) | function percentEscapeQuery(c) {
function parse (line 7436) | function parse(input, stateOverride, base) {
function clear (line 7783) | function clear() {
function JURL (line 7796) | function JURL(url, base) {
method href (line 7810) | get href() {
method href (line 7820) | set href(value) {
method protocol (line 7824) | get protocol() {
method protocol (line 7827) | set protocol(value) {
method host (line 7833) | get host() {
method host (line 7836) | set host(value) {
method hostname (line 7842) | get hostname() {
method hostname (line 7845) | set hostname(value) {
method port (line 7851) | get port() {
method port (line 7854) | set port(value) {
method pathname (line 7860) | get pathname() {
method pathname (line 7863) | set pathname(value) {
method search (line 7870) | get search() {
method search (line 7873) | set search(value) {
method hash (line 7883) | get hash() {
method hash (line 7886) | set hash(value) {
method origin (line 7896) | get origin() {
function defineProperties (line 7935) | function defineProperties(target, props) { for (var i = 0; i < props.len...
function _possibleConstructorReturn (line 7945) | function _possibleConstructorReturn(self, call) { if (!self) { throw new...
function _inherits (line 7947) | function _inherits(subClass, superClass) { if (typeof superClass !== "fu...
function _classCallCheck (line 7949) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function BasePdfManager (line 7952) | function BasePdfManager() {
function LocalPdfManager (line 8052) | function LocalPdfManager(docId, data, password, evaluatorOptions, docBas...
function NetworkPdfManager (line 8103) | function NetworkPdfManager(docId, pdfNetworkStream, args, evaluatorOptio...
function ChunkedStream (line 8199) | function ChunkedStream(length, chunkSize, manager) {
method length (line 8304) | get length() {
method isEmpty (line 8307) | get isEmpty() {
function ChunkedStreamSubstream (line 8385) | function ChunkedStreamSubstream() {}
function ChunkedStreamManager (line 8409) | function ChunkedStreamManager(pdfNetworkStream, args) {
function sliceIterator (line 8674) | function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = ...
function isAnnotationRenderable (line 8699) | function isAnnotationRenderable(annotation, intent) {
function Page (line 8702) | function Page(_ref) {
method content (line 8749) | get content() {
method resources (line 8752) | get resources() {
method mediaBox (line 8755) | get mediaBox() {
method cropBox (line 8762) | get cropBox() {
method userUnit (line 8769) | get userUnit() {
method view (line 8776) | get view() {
method rotate (line 8785) | get rotate() {
method annotations (line 8944) | get annotations() {
function PDFDocument (line 8962) | function PDFDocument(pdfManager, arg) {
function find (line 8984) | function find(stream, needle, limit, backwards) {
method linearization (line 9038) | get linearization() {
method startXRef (line 9050) | get startXRef() {
method mainXRefEntriesOffset (line 9090) | get mainXRefEntriesOffset() {
method numPages (line 9126) | get numPages() {
method documentInfo (line 9131) | get documentInfo() {
method fingerprint (line 9161) | get fingerprint() {
function defineProperties (line 9248) | function defineProperties(target, props) { for (var i = 0; i < props.len...
function _possibleConstructorReturn (line 9264) | function _possibleConstructorReturn(self, call) { if (!self) { throw new...
function _inherits (line 9266) | function _inherits(subClass, superClass) { if (typeof superClass !== "fu...
function _classCallCheck (line 9268) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function Catalog (line 9271) | function Catalog(pdfManager, xref) {
method metadata (line 9283) | get metadata() {
method toplevelPagesDict (line 9307) | get toplevelPagesDict() {
method documentOutline (line 9314) | get documentOutline() {
method numPages (line 9401) | get numPages() {
method destinations (line 9408) | get destinations() {
function fetchDestination (line 9441) | function fetchDestination(dest) {
method pageLabels (line 9466) | get pageLabels() {
method pageMode (line 9560) | get pageMode() {
method attachments (line 9576) | get attachments() {
method javaScript (line 9597) | get javaScript() {
function next (line 9668) | function next() {
function pagesBeforeRef (line 9734) | function pagesBeforeRef(kidRef) {
function next (line 9793) | function next(ref) {
function addDefaultProtocolToUrl (line 9808) | function addDefaultProtocolToUrl(url) {
function tryConvertUrlEncoding (line 9814) | function tryConvertUrlEncoding(url) {
function XRef (line 9937) | function XRef(stream, pdfManager) {
function readToken (line 10160) | function readToken(data, offset) {
function skipUntil (line 10172) | function skipUntil(data, offset, what) {
function NameOrNumberTree (line 10526) | function NameOrNumberTree(root, xref, type) {
function NameTree (line 10638) | function NameTree(root, xref) {
function NumberTree (line 10650) | function NumberTree(root, xref) {
function FileSpec (line 10660) | function FileSpec(root, xref) {
function pickPlatformItem (line 10679) | function pickPlatformItem(dict) {
method filename (line 10694) | get filename() {
method content (line 10701) | get content() {
method serializable (line 10722) | get serializable() {
function mayHaveChildren (line 10732) | function mayHaveChildren(value) {
function addChildren (line 10735) | function addChildren(node, nodesToVisit) {
function ObjectLoader (line 10754) | function ObjectLoader(dict, keys, xref) {
function Name (line 10864) | function Name(name) {
function Cmd (line 10876) | function Cmd(cmd) {
function Dict (line 10891) | function Dict(xref) {
function Ref (line 10991) | function Ref(num, gen) {
function RefSet (line 11007) | function RefSet() {
function RefSetCache (line 11024) | function RefSetCache() {
function isEOF (line 11051) | function isEOF(v) {
function isName (line 11054) | function isName(v, name) {
function isCmd (line 11057) | function isCmd(v, cmd) {
function isDict (line 11060) | function isDict(v, type) {
function isRef (line 11063) | function isRef(v) {
function isRefsEqual (line 11066) | function isRefsEqual(v1, v2) {
function isStream (line 11069) | function isStream(v) {
function computeAdler32 (line 11115) | function computeAdler32(bytes) {
function Parser (line 11126) | function Parser(lexer, allowStreams, xref, recoveryMode) {
function Lexer (line 11644) | function Lexer(stream, knownCommands) {
function toHexDigit (line 11652) | function toHexDigit(ch) {
function getInt (line 12036) | function getInt(name, allowZeroValue) {
function getHints (line 12043) | function getHints() {
function _toConsumableArray (line 12099) | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i ...
function Stream (line 12102) | function Stream(arrayBuffer, start, length, dict) {
method length (line 12110) | get length() {
method isEmpty (line 12113) | get isEmpty() {
function StringStream (line 12188) | function StringStream(str) {
function DecodeStream (line 12197) | function DecodeStream(maybeMinBufferLength) {
method isEmpty (line 12211) | get isEmpty() {
function StreamsSequenceStream (line 12320) | function StreamsSequenceStream(streams) {
function FlateStream (line 12366) | function FlateStream(str, maybeLength) {
function PredictorStream (line 12599) | function PredictorStream(str, maybeLength, params) {
function DecryptStream (line 12787) | function DecryptStream(str, maybeLength, decrypt) {
function Ascii85Stream (line 12825) | function Ascii85Stream(str, maybeLength) {
function AsciiHexStream (line 12891) | function AsciiHexStream(str, maybeLength) {
function RunLengthStream (line 12942) | function RunLengthStream(str, maybeLength) {
function LZWStream (line 12978) | function LZWStream(str, maybeLength, earlyChange) {
function NullStream (line 13094) | function NullStream() {
function CCITTFaxStream (line 13132) | function CCITTFaxStream(str, maybeLength, params) {
function CCITTFaxDecoder (line 13202) | function CCITTFaxDecoder(source) {
function Jbig2Stream (line 13734) | function Jbig2Stream(stream, maybeLength, dict, params) {
function Jbig2Error (line 13804) | function Jbig2Error(msg) {
function ContextCache (line 13813) | function ContextCache() {}
function DecodingContext (line 13822) | function DecodingContext(data, start, end) {
method decoder (line 13828) | get decoder() {
method contextCache (line 13832) | get contextCache() {
function decodeInteger (line 13837) | function decodeInteger(contextCache, procedure, decoder) {
function decodeIAID (line 13853) | function decodeIAID(contextCache, decoder, codeLength) {
function decodeBitmapTemplate0 (line 14065) | function decodeBitmapTemplate0(width, height, decodingContext) {
function decodeBitmap (line 14089) | function decodeBitmap(mmr, width, height, templateIndex, prediction, ski...
function decodeRefinement (line 14197) | function decodeRefinement(width, height, templateIndex, referenceBitmap,...
function decodeSymbolDictionary (line 14265) | function decodeSymbolDictionary(huffman, refinement, symbols, numberOfNe...
function decodeTextRegion (line 14374) | function decodeTextRegion(huffman, refinement, width, height, defaultPix...
function decodePatternDictionary (line 14481) | function decodePatternDictionary(mmr, patternWidth, patternHeight, maxPa...
function decodeHalftoneRegion (line 14523) | function decodeHalftoneRegion(mmr, patterns, template, regionWidth, regi...
function readSegmentHeader (line 14634) | function readSegmentHeader(data, start) {
function readSegments (line 14714) | function readSegments(header, data, start, end) {
function readRegionSegmentInformation (line 14743) | function readRegionSegmentInformation(data, start) {
function processSegment (line 14753) | function processSegment(segment, visitor) {
function processSegments (line 14945) | function processSegments(segments, visitor) {
function parseJbig2Chunks (line 14950) | function parseJbig2Chunks(chunks) {
function parseJbig2 (line 14959) | function parseJbig2(data) {
function SimpleSegmentVisitor (line 15002) | function SimpleSegmentVisitor() {}
function HuffmanLine (line 15144) | function HuffmanLine(lineData) {
function HuffmanTreeNode (line 15161) | function HuffmanTreeNode(line) {
function HuffmanTable (line 15201) | function HuffmanTable(lines, prefixCodesDone) {
function decodeTablesSegment (line 15253) | function decodeTablesSegment(data, start, end) {
function getStandardTable (line 15281) | function getStandardTable(number) {
function Reader (line 15345) | function Reader(data, start, end) {
function getCustomHuffmanTable (line 15384) | function getCustomHuffmanTable(index, referredTo, customTables) {
function getTextRegionHuffmanTables (line 15400) | function getTextRegionHuffmanTables(textRegion, referredTo, customTables...
function getSymbolDictionaryHuffmanTables (line 15498) | function getSymbolDictionaryHuffmanTables(dictionary, referredTo, custom...
function readUncompressedBitmap (line 15546) | function readUncompressedBitmap(reader, width, height) {
function decodeMMRBitmap (line 15561) | function decodeMMRBitmap(input, width, height, endOfBlock) {
function Jbig2Image (line 15604) | function Jbig2Image() {}
function ArithmeticDecoder (line 15871) | function ArithmeticDecoder(data, start, end) {
function JpegStream (line 15985) | function JpegStream(stream, maybeLength, dict, params) {
function JpegError (line 16072) | function JpegError(msg) {
function DNLMarkerError (line 16081) | function DNLMarkerError(message, scanLines) {
function EOIMarkerError (line 16091) | function EOIMarkerError(message) {
function JpegImage (line 16109) | function JpegImage() {
function buildHuffmanTable (line 16119) | function buildHuffmanTable(codeLengths, values) {
function getBlockBufferOffset (line 16164) | function getBlockBufferOffset(component, row, col) {
function decodeScan (line 16167) | function decodeScan(data, offset, frame, components, resetInterval, spec...
function quantizeAndInverse (line 16436) | function quantizeAndInverse(component, blockBufferOffset, p) {
function buildComponentData (line 16585) | function buildComponentData(frame, component) {
function findNextFileMarker (line 16597) | function findNextFileMarker(data, currentPos) {
function readUint16 (line 16635) | function readUint16() {
function readDataBlock (line 16640) | function readDataBlock() {
function prepareComponents (line 16652) | function prepareComponents(frame) {
function JpxStream (line 17060) | function JpxStream(stream, maybeLength, dict, params) {
function JpxError (line 17133) | function JpxError(msg) {
function JpxImage (line 17148) | function JpxImage() {
function calculateComponentDimensions (line 17508) | function calculateComponentDimensions(component, siz) {
function calculateTileGrids (line 17516) | function calculateTileGrids(context, components) {
function getBlocksDimensions (line 17552) | function getBlocksDimensions(context, component, r) {
function buildPrecincts (line 17566) | function buildPrecincts(context, resolution, dimensions) {
function buildCodeblocks (line 17585) | function buildCodeblocks(context, subband, dimensions) {
function createPacket (line 17654) | function createPacket(resolution, precinctNumber, layerNumber) {
function LayerResolutionComponentPositionIterator (line 17673) | function LayerResolutionComponentPositionIterator(context) {
function ResolutionLayerComponentPositionIterator (line 17711) | function ResolutionLayerComponentPositionIterator(context) {
function ResolutionPositionComponentLayerIterator (line 17749) | function ResolutionPositionComponentLayerIterator(context) {
function PositionComponentResolutionLayerIterator (line 17803) | function PositionComponentResolutionLayerIterator(context) {
function ComponentPositionResolutionLayerIterator (line 17845) | function ComponentPositionResolutionLayerIterator(context) {
function getPrecinctIndexIfExist (line 17887) | function getPrecinctIndexIfExist(pxIndex, pyIndex, sizeInImageScale, pre...
function getPrecinctSizesInImageScale (line 17896) | function getPrecinctSizesInImageScale(tile) {
function buildPackets (line 17946) | function buildPackets(context) {
function parseTilePackets (line 18039) | function parseTilePackets(context, data, offset, dataLength) {
function copyCoefficients (line 18209) | function copyCoefficients(coefficients, levelWidth, levelHeight, subband...
function transformTile (line 18298) | function transformTile(context, tile, c) {
function transformComponents (line 18348) | function transformComponents(context) {
function initializeTile (line 18427) | function initializeTile(context, tileIndex) {
function TagTree (line 18441) | function TagTree(width, height) {
function InclusionTree (line 18500) | function InclusionTree(width, height, defaultValue) {
function BitModel (line 18578) | function BitModel(width, height, subband, zeroBitPlanes, mb) {
function Transform (line 18846) | function Transform() {}
function IrreversibleTransform (line 18947) | function IrreversibleTransform() {
function ReversibleTransform (line 19023) | function ReversibleTransform() {
function defineProperties (line 19056) | function defineProperties(target, props) { for (var i = 0; i < props.len...
function _possibleConstructorReturn (line 19064) | function _possibleConstructorReturn(self, call) { if (!self) { throw new...
function _inherits (line 19066) | function _inherits(subClass, superClass) { if (typeof superClass !== "fu...
function _classCallCheck (line 19068) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function ARCFourCipher (line 19071) | function ARCFourCipher(key) {
function hash (line 19120) | function hash(data, offset, length) {
function Word64 (line 19187) | function Word64(highInteger, lowInteger) {
function rotr (line 19266) | function rotr(x, n) {
function ch (line 19269) | function ch(x, y, z) {
function maj (line 19272) | function maj(x, y, z) {
function sigma (line 19275) | function sigma(x) {
function sigmaPrime (line 19278) | function sigmaPrime(x) {
function littleSigma (line 19281) | function littleSigma(x) {
function littleSigmaPrime (line 19284) | function littleSigmaPrime(x) {
function hash (line 19288) | function hash(data, offset, length) {
function ch (line 19361) | function ch(result, x, y, z, tmp) {
function maj (line 19369) | function maj(result, x, y, z, tmp) {
function sigma (line 19379) | function sigma(result, x, tmp) {
function sigmaPrime (line 19389) | function sigmaPrime(result, x, tmp) {
function littleSigma (line 19399) | function littleSigma(result, x, tmp) {
function littleSigmaPrime (line 19409) | function littleSigmaPrime(result, x, tmp) {
function hash (line 19420) | function hash(data, offset, length, mode384) {
function hash (line 19566) | function hash(data, offset, length) {
function NullCipher (line 19572) | function NullCipher() {}
function AESBaseCipher (line 19582) | function AESBaseCipher() {
function AES128Cipher (line 19877) | function AES128Cipher(key) {
function AES256Cipher (line 19928) | function AES256Cipher(key) {
function compareByteArrays (line 19990) | function compareByteArrays(array1, array2) {
function PDF17 (line 20001) | function PDF17() {}
function concatArrays (line 20039) | function concatArrays(array1, array2) {
function calculatePDF20Hash (line 20045) | function calculatePDF20Hash(password, input, userBytes) {
function PDF20 (line 20077) | function PDF20() {}
function compareByteArrays (line 20078) | function compareByteArrays(array1, array2) {
function CipherTransform (line 20129) | function CipherTransform(stringCipherConstructor, streamCipherConstructo...
function createEncryptionKey20 (line 20151) | function createEncryptionKey20(revision, password, ownerPassword, ownerV...
function prepareKeyData (line 20171) | function prepareKeyData(fileId, password, ownerPassword, userPassword, f...
function decodeUserPassword (line 20247) | function decodeUserPassword(password, ownerPassword, revision, keyLength) {
function CipherTransformFactory (line 20286) | function CipherTransformFactory(dict, fileId, password) {
function buildObjectKey (line 20370) | function buildObjectKey(num, gen, encryptionKey, isAes) {
function buildCipherConstructor (line 20391) | function buildCipherConstructor(cf, name, num, gen, key) {
function resizeRgbImage (line 20464) | function resizeRgbImage(src, dest, w1, h1, w2, h2, alpha01) {
function ColorSpace (line 20490) | function ColorSpace() {
method gray (line 20755) | get gray() {
method rgb (line 20758) | get rgb() {
method cmyk (line 20761) | get cmyk() {
function AlternateCS (line 20768) | function AlternateCS(numComps, base, tintFn) {
function PatternCS (line 20832) | function PatternCS(baseCS) {
function IndexedCS (line 20840) | function IndexedCS(base, highVal, lookup) {
function DeviceGrayCS (line 20896) | function DeviceGrayCS() {
function DeviceRgbCS (line 20934) | function DeviceRgbCS() {
function convertToRgb (line 20978) | function convertToRgb(src, srcOffset, srcScale, dest, destOffset) {
function DeviceCmykCS (line 20987) | function DeviceCmykCS() {
function CalGrayCS (line 21021) | function CalGrayCS(whitePoint, blackPoint, gamma) {
function convertToRgb (line 21052) | function convertToRgb(cs, src, srcOffset, dest, destOffset, scale) {
function CalRGBCS (line 21097) | function CalRGBCS(whitePoint, blackPoint, gamma, matrix) {
function matrixProduct (line 21139) | function matrixProduct(a, b, result) {
function convertToFlat (line 21144) | function convertToFlat(sourceWhitePoint, LMS, result) {
function convertToD65 (line 21149) | function convertToD65(sourceWhitePoint, LMS, result) {
function sRGBTransferFunction (line 21157) | function sRGBTransferFunction(color) {
function adjustToRange (line 21163) | function adjustToRange(min, max, value) {
function decodeL (line 21166) | function decodeL(L) {
function compensateBlackPoint (line 21175) | function compensateBlackPoint(sourceBlackPoint, XYZ_Flat, result) {
function normalizeWhitePointToFlat (line 21199) | function normalizeWhitePointToFlat(sourceWhitePoint, XYZ_In, result) {
function normalizeWhitePointToD65 (line 21212) | function normalizeWhitePointToD65(sourceWhitePoint, XYZ_In, result) {
function convertToRgb (line 21219) | function convertToRgb(cs, src, srcOffset, dest, destOffset, scale) {
function LabCS (line 21273) | function LabCS(whitePoint, blackPoint, range) {
function fn_g (line 21307) | function fn_g(x) {
function decode (line 21316) | function decode(value, high1, low2, high2) {
function convertToRgb (line 21319) | function convertToRgb(cs, src, srcOffset, maxVal, dest, destOffset) {
function defineProperties (line 21393) | function defineProperties(target, props) { for (var i = 0; i < props.len...
function _possibleConstructorReturn (line 21407) | function _possibleConstructorReturn(self, call) { if (!self) { throw new...
function _inherits (line 21409) | function _inherits(subClass, superClass) { if (typeof superClass !== "fu...
function _classCallCheck (line 21411) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function AnnotationFactory (line 21414) | function AnnotationFactory() {
function getTransformMatrix (line 21495) | function getTransformMatrix(rect, bbox, matrix) {
function Annotation (line 21510) | function Annotation(params) {
function AnnotationBorderStyle (line 21718) | function AnnotationBorderStyle() {
function WidgetAnnotation (line 21808) | function WidgetAnnotation(params) {
function TextWidgetAnnotation (line 21897) | function TextWidgetAnnotation(params) {
function ButtonWidgetAnnotation (line 21953) | function ButtonWidgetAnnotation(params) {
function ChoiceWidgetAnnotation (line 22042) | function ChoiceWidgetAnnotation(params) {
function TextAnnotation (line 22077) | function TextAnnotation(parameters) {
function LinkAnnotation (line 22102) | function LinkAnnotation(params) {
function PopupAnnotation (line 22122) | function PopupAnnotation(parameters) {
function LineAnnotation (line 22160) | function LineAnnotation(parameters) {
function SquareAnnotation (line 22178) | function SquareAnnotation(parameters) {
function CircleAnnotation (line 22194) | function CircleAnnotation(parameters) {
function PolylineAnnotation (line 22210) | function PolylineAnnotation(parameters) {
function PolygonAnnotation (line 22235) | function PolygonAnnotation(parameters) {
function HighlightAnnotation (line 22250) | function HighlightAnnotation(parameters) {
function UnderlineAnnotation (line 22266) | function UnderlineAnnotation(parameters) {
function SquigglyAnnotation (line 22282) | function SquigglyAnnotation(parameters) {
function StrikeOutAnnotation (line 22298) | function StrikeOutAnnotation(parameters) {
function StampAnnotation (line 22314) | function StampAnnotation(parameters) {
function FileAttachmentAnnotation (line 22330) | function FileAttachmentAnnotation(parameters) {
function addState (line 22364) | function addState(parentState, pattern, checkFn, iterateFn, processFn) {
function handlePaintSolidColorImageMask (line 22376) | function handlePaintSolidColorImageMask(iFirstSave, count, fnArray, args...
function QueueOptimizer (line 22681) | function QueueOptimizer(queue) {
function NullOptimizer (line 22760) | function NullOptimizer(queue) {
function getTransfers (line 22775) | function getTransfers(queue) {
function OperatorList (line 22793) | function OperatorList(intent, messageHandler, pageIndex) {
method length (line 22809) | get length() {
method totalLength (line 22812) | get totalLength() {
function NativeImageDecoder (line 22936) | function NativeImageDecoder(_ref) {
function PartialEvaluator (line 22983) | function PartialEvaluator(_ref3) {
function TimeSlotManager (line 23020) | function TimeSlotManager() {
function normalizeBlendMode (line 23036) | function normalizeBlendMode(value) {
function errorFont (line 23500) | function errorFont() {
function closePendingRestoreOPS (line 23655) | function closePendingRestoreOPS(argument) {
function ensureTextContentItem (line 23984) | function ensureTextContentItem() {
function replaceWhitespace (line 24044) | function replaceWhitespace(str) {
function runBidiTransform (line 24053) | function runBidiTransform(textChunk) {
function handleSetFont (line 24065) | function handleSetFont(fontName, fontRef) {
function buildTextContentItem (line 24071) | function buildTextContentItem(chars) {
function addFakeSpaces (line 24122) | function addFakeSpaces(width, strBuf) {
function flushTextContentItem (line 24135) | function flushTextContentItem() {
function enqueueChunk (line 24145) | function enqueueChunk() {
method desiredSize (line 24347) | get desiredSize() {
method ready (line 24350) | get ready() {
function TranslatedFont (line 25003) | function TranslatedFont(loadedName, font, dict) {
function StateManager (line 25069) | function StateManager(initialState) {
function TextState (line 25092) | function TextState() {
function EvalState (line 25184) | function EvalState() {
function EvaluatorPreprocessor (line 25577) | function EvaluatorPreprocessor(stream, xref, stateManager) {
method savedStatesDepth (line 25585) | get savedStatesDepth() {
function defineProperties (line 25680) | function defineProperties(target, props) { for (var i = 0; i < props.len...
function _possibleConstructorReturn (line 25690) | function _possibleConstructorReturn(self, call) { if (!self) { throw new...
function _inherits (line 25692) | function _inherits(subClass, superClass) { if (typeof superClass !== "fu...
function _classCallCheck (line 25694) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function CMap (line 25699) | function CMap() {
function IdentityCMap (line 25846) | function IdentityCMap(vertical, n) {
function hexToInt (line 25923) | function hexToInt(a, size) {
function hexToStr (line 25930) | function hexToStr(a, size) {
function addHex (line 25939) | function addHex(a, b, size) {
function incHex (line 25947) | function incHex(a, size) {
function BinaryCMapStream (line 25957) | function BinaryCMapStream(data) {
function processBinaryCMap (line 26035) | function processBinaryCMap(data, cMap, extend) {
function BinaryCMapReader (line 26180) | function BinaryCMapReader() {}
function strToInt (line 26185) | function strToInt(str) {
function expectString (line 26192) | function expectString(obj) {
function expectInt (line 26197) | function expectInt(obj) {
function parseBfChar (line 26202) | function parseBfChar(cMap, lexer) {
function parseBfRange (line 26219) | function parseBfRange(cMap, lexer) {
function parseCidChar (line 26251) | function parseCidChar(cMap, lexer) {
function parseCidRange (line 26268) | function parseCidRange(cMap, lexer) {
function parseCodespaceRange (line 26288) | function parseCodespaceRange(cMap, lexer) {
function parseWMode (line 26310) | function parseWMode(cMap, lexer) {
function parseCMapName (line 26316) | function parseCMapName(cMap, lexer) {
function parseCMap (line 26322) | function parseCMap(cMap, lexer, fetchBuiltInCMap, useCMap) {
function extendCMap (line 26379) | function extendCMap(cMap, fetchBuiltInCMap, useCMap) {
function createBuiltInCMap (line 26397) | function createBuiltInCMap(name, fetchBuiltInCMap) {
function adjustWidths (line 26499) | function adjustWidths(properties) {
function adjustToUnicode (line 26513) | function adjustToUnicode(properties, builtInEncoding) {
function getFontType (line 26537) | function getFontType(type, subtype) {
function recoverGlyphName (line 26557) | function recoverGlyphName(name, glyphsUnicodeMap) {
function Glyph (line 26573) | function Glyph(fontChar, unicode, accent, width, vmetric, operatorListId...
function ToUnicodeMap (line 26589) | function ToUnicodeMap() {
method length (line 26595) | get length() {
function IdentityToUnicodeMap (line 26630) | function IdentityToUnicodeMap(firstChar, lastChar) {
method length (line 26635) | get length() {
function writeInt16 (line 26662) | function writeInt16(dest, offset, num) {
function writeInt32 (line 26666) | function writeInt32(dest, offset, num) {
function writeData (line 26672) | function writeData(dest, offset, data) {
function OpenTypeFileBuilder (line 26686) | function OpenTypeFileBuilder(sfnt) {
function Font (line 26769) | function Font(name, file, properties) {
function int16 (line 26894) | function int16(b0, b1) {
function writeSignedInt16 (line 26897) | function writeSignedInt16(bytes, index, value) {
function signedInt16 (line 26901) | function signedInt16(b0, b1) {
function int32 (line 26905) | function int32(b0, b1, b2, b3) {
function string16 (line 26908) | function string16(value) {
function safeString16 (line 26911) | function safeString16(value) {
function isTrueTypeFile (line 26915) | function isTrueTypeFile(file) {
function isTrueTypeCollectionFile (line 26919) | function isTrueTypeCollectionFile(file) {
function isOpenTypeFile (line 26923) | function isOpenTypeFile(file) {
function isType1File (line 26927) | function isType1File(file) {
function buildToFontChar (line 26937) | function buildToFontChar(encoding, glyphsUnicodeMap, differences) {
function isProblematicUnicodeLocation (line 26954) | function isProblematicUnicodeLocation(code) {
function adjustMapping (line 26967) | function adjustMapping(charCodeToGlyphId, properties, missingGlyphs) {
function getRanges (line 27013) | function getRanges(glyphs, numGlyphs) {
function createCmapTable (line 27052) | function createCmapTable(glyphs, numGlyphs) {
function validateOS2Table (line 27135) | function validateOS2Table(os2) {
function createOS2Table (line 27156) | function createOS2Table(properties, charstrings, override) {
function createPostTable (line 27208) | function createPostTable(properties) {
function createNameTable (line 27212) | function createNameTable(name, proto) {
method renderer (line 27251) | get renderer() {
function readTables (line 27334) | function readTables(file, numTables) {
function readTableEntry (line 27356) | function readTableEntry(file) {
function readOpenTypeHeader (line 27378) | function readOpenTypeHeader(ttf) {
function readTrueTypeCollectionHeader (line 27387) | function readTrueTypeCollectionHeader(ttc) {
function readTrueTypeCollectionData (line 27415) | function readTrueTypeCollectionData(ttc, fontName) {
function readCmapTable (line 27442) | function readCmapTable(cmap, font, isSymbolicFont, hasEncoding) {
function sanitizeMetrics (line 27606) | function sanitizeMetrics(font, header, metrics, numGlyphs) {
FILE: src/components/Docs/DebugSample/DebugSample.js
constant CONTENT_COLOR (line 6) | const CONTENT_COLOR = '#d1e3f3';
constant PADDING_COLOR (line 7) | const PADDING_COLOR = '#e2efdd';
constant MARGIN_COLOR (line 8) | const MARGIN_COLOR = '#fce6d0';
FILE: src/components/Repl/Catch.js
class Catch (line 3) | class Catch extends React.Component {
method getDerivedStateFromError (line 8) | static getDerivedStateFromError(error) {
method componentDidCatch (line 12) | componentDidCatch(error, info) {
method render (line 18) | render() {
FILE: src/components/Repl/CodeEditor.js
constant DEFAULT_CODE_MIRROR_OPTIONS (line 5) | const DEFAULT_CODE_MIRROR_OPTIONS = {
FILE: src/components/UI/Icon/Icon.js
constant BUNDLED_ICON_TYPES (line 26) | const BUNDLED_ICON_TYPES = {
Condensed preview — 160 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,306K chars).
[
{
"path": ".babelrc.js",
"chars": 198,
"preview": "const env = require('./env-config.js')\n\nmodule.exports = {\n presets: ['next/babel'],\n plugins: [\n [\"prismjs\", {\n "
},
{
"path": ".gitignore",
"chars": 60,
"preview": "node_modules\ndist\n.DS_Store\n.env\n*.snap\n.vscode\n*.log\n.next\n"
},
{
"path": ".nvmrc",
"chars": 3,
"preview": "18\n"
},
{
"path": "blog/announcing-react-pdf-v2.md",
"chars": 10763,
"preview": "export const metadata = {\n date: '04/06/2021',\n author: 'diegomura',\n title: 'Announcing react-pdf v2.0',\n image: {\n"
},
{
"path": "docs/advanced.md",
"chars": 1182,
"preview": "import EditButton from '../src/components/Docs/EditButton'\nimport NavigationButtons from '../src/components/Docs/Navigat"
},
{
"path": "docs/compatibility.md",
"chars": 2223,
"preview": "import EditButton from '../src/components/Docs/EditButton'\nimport NavigationButtons from '../src/components/Docs/Navigat"
},
{
"path": "docs/components.md",
"chars": 26402,
"preview": "import EditButton from '../src/components/Docs/EditButton'\nimport NavigationButtons from '../src/components/Docs/Navigat"
},
{
"path": "docs/debugging.md",
"chars": 485,
"preview": "import DebugSample from '../src/components/Docs/DebugSample'\nimport GoToExample from '../src/components/Docs/GoToExample"
},
{
"path": "docs/document-navigation.md",
"chars": 2975,
"preview": "### Document Navigation\n\nThere are two main ways to make a document navigable:\n\n#### Destinations `v2.0.0`\n\nDestinations"
},
{
"path": "docs/dynamic-content.md",
"chars": 1764,
"preview": "import GoToExample from '../src/components/Docs/GoToExample'\n\n### Dynamic content\n\nWith react-pdf, now it is possible to"
},
{
"path": "docs/express.md",
"chars": 332,
"preview": "### Usage with Express.js `node only`\n\n```jsx\nimport React from 'react';\nimport ReactPDF from '@react-pdf/renderer';\n\nco"
},
{
"path": "docs/fonts.md",
"chars": 6433,
"preview": "import EditButton from '../src/components/Docs/EditButton'\nimport GoToExample from '../src/components/Docs/GoToExample'\n"
},
{
"path": "docs/form.md",
"chars": 10161,
"preview": "import EditButton from '../src/components/Docs/EditButton'\nimport GoToExample from '../src/components/Docs/GoToExample'\n"
},
{
"path": "docs/hooks.md",
"chars": 1913,
"preview": "import EditButton from '../src/components/Docs/EditButton'\nimport NavigationButtons from '../src/components/Docs/Navigat"
},
{
"path": "docs/hyphenation.md",
"chars": 1634,
"preview": "import GoToExample from '../src/components/Docs/GoToExample'\n\n### Hyphenation\n\nHyphenation refers to the automated proce"
},
{
"path": "docs/math.md",
"chars": 2501,
"preview": "import GoToExample from '../src/components/Docs/GoToExample'\n\n### Math expressions\n\nReact-pdf supports rendering LaTeX m"
},
{
"path": "docs/node.md",
"chars": 2602,
"preview": "import EditButton from '../src/components/Docs/EditButton'\nimport NavigationButtons from '../src/components/Docs/Navigat"
},
{
"path": "docs/on-the-fly.md",
"chars": 2837,
"preview": "### On the fly rendering `Web only`\n\nThere are some cases in which you may need to generate a document without showing i"
},
{
"path": "docs/orphan-widow-protection.md",
"chars": 1467,
"preview": "import GoToExample from '../src/components/Docs/GoToExample'\n\n### Orphan & widow protection\n\nWhen you layout text, orpha"
},
{
"path": "docs/page-wrapping.md",
"chars": 3355,
"preview": "import GoToExample from '../src/components/Docs/GoToExample'\n\n### Page wrapping\n\nSemantically, the `<Page />` component "
},
{
"path": "docs/quick-start.md",
"chars": 2918,
"preview": "import EditButton from '../src/components/Docs/EditButton'\nimport GoToExample from '../src/components/Docs/GoToExample'\n"
},
{
"path": "docs/rendering-process.md",
"chars": 2909,
"preview": "import EditButton from '../src/components/Docs/EditButton'\nimport OverviewTimeline from '../src/components/Docs/Overview"
},
{
"path": "docs/styling.md",
"chars": 5451,
"preview": "import List from '../src/components/UI/List'\nimport EditButton from '../src/components/Docs/EditButton'\nimport GoToExamp"
},
{
"path": "docs/svg.md",
"chars": 18361,
"preview": "import EditButton from '../src/components/Docs/EditButton'\nimport GoToExample from '../src/components/Docs/GoToExample'\n"
},
{
"path": "docs/web-workers.md",
"chars": 693,
"preview": "### Rendering large documents in the browser\n\nIf you need to render documents with 30 pages or more in the browser, usin"
},
{
"path": "env-config.js",
"chars": 97,
"preview": "require('dotenv').config();\n\nmodule.exports = {\n 'process.env.GA_TOKEN': process.env.GA_TOKEN\n}\n"
},
{
"path": "examples/breakable-unbreakable.txt",
"chars": 797,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n title: { marginTop: \"90%\" },\n emphasis: { fontFamily: 'He"
},
{
"path": "examples/checkbox.txt",
"chars": 2451,
"preview": "const Multichoice = () => {\n const currentYear = new Date().getYear()+1900;\n return (\n <View>\n <Text style={st"
},
{
"path": "examples/circle.txt",
"chars": 360,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/clippath.txt",
"chars": 520,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/debugging.txt",
"chars": 294,
"preview": "const styles = StyleSheet.create({\n container: {\n height: 300,\n width: 400,\n margin: 20,\n paddingVertical: "
},
{
"path": "examples/disable-hyphenation.txt",
"chars": 975,
"preview": "Font.registerHyphenationCallback(word => {\n // Return entire word as unique part\n return [word];\n});\n\nconst styles = S"
},
{
"path": "examples/disable-wrapping.txt",
"chars": 645,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n title: { marginTop: \"90%\" },\n emphasis: { fontFamily: 'He"
},
{
"path": "examples/ellipse.txt",
"chars": 381,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/emoji.txt",
"chars": 538,
"preview": "const styles = StyleSheet.create({\n container: {\n height: 700,\n marginVertical: 70,\n marginHorizontal: \"10%\"\n "
},
{
"path": "examples/fixed-components.txt",
"chars": 442,
"preview": "const styles = StyleSheet.create({\n container: {\n height: 1200,\n width: '100%',\n },\n fixed: {\n bottom: 0,\n "
},
{
"path": "examples/font-register.txt",
"chars": 1212,
"preview": "Font.register({\n family: 'Roboto',\n fonts: [\n {\n src: `fonts/Roboto-Regular.ttf`\n },\n {\n src: `font"
},
{
"path": "examples/formfield.txt",
"chars": 1836,
"preview": "const Address = (props) => (\n <FormField name={props.name.toLowerCase()}>\n <Text style={styles.heading}>{props.name}"
},
{
"path": "examples/fractals.txt",
"chars": 1520,
"preview": "const styles = StyleSheet.create({\n row: {\n flexGrow: 1,\n flexDirection: 'row',\n },\n column: {\n flexGrow: 1,"
},
{
"path": "examples/g.txt",
"chars": 390,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/hyphenation-callback.txt",
"chars": 1228,
"preview": "// Register hyphenation callback.\n// In this example, we enable words to break in half\nFont.registerHyphenationCallback("
},
{
"path": "examples/images.txt",
"chars": 2072,
"preview": "const styles = StyleSheet.create({\n page: { flexDirection: 'row' },\n image: { flexGrow: 8, backgroundColor: 'grey', pa"
},
{
"path": "examples/inline-styles.txt",
"chars": 257,
"preview": "const doc = (\n <Document>\n <Page size=\"A4\" style={{ backgroundColor: 'tomato' }}>\n <View style={{ color: 'white"
},
{
"path": "examples/knobs.txt",
"chars": 1539,
"preview": "const styles = StyleSheet.create({\n select: {\n height: '9%',\n alignItems: 'center',\n flexDirection: 'row',\n "
},
{
"path": "examples/line.txt",
"chars": 390,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/lineargradient.txt",
"chars": 522,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/math.txt",
"chars": 3884,
"preview": "const styles = StyleSheet.create({\n page: {\n padding: 40,\n backgroundColor: '#fafafa',\n },\n title: {\n fontSi"
},
{
"path": "examples/media-queries.txt",
"chars": 765,
"preview": "const styles = StyleSheet.create({\n body: {\n padding: 35,\n },\n content: {\n padding: 20,\n '@media max-width: "
},
{
"path": "examples/mixed-styles.txt",
"chars": 350,
"preview": "const styles = StyleSheet.create({\n page: { backgroundColor: 'tomato' },\n section: { textAlign: 'center', margin: 30 }"
},
{
"path": "examples/orphans-and-widows.txt",
"chars": 3281,
"preview": "const styles = StyleSheet.create({\n page: {\n padding: 60\n },\n text: {\n margin: 12,\n fontSize: 14,\n textAl"
},
{
"path": "examples/page-breaks.txt",
"chars": 5050,
"preview": "const Quixote = () => (\n <Document>\n <Page style={styles.body} wrap>\n <Text style={styles.title}>Don Quijote de"
},
{
"path": "examples/page-numbers.txt",
"chars": 831,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n box: { width: '100%', marginBottom: 30, borderRadius: 5 },"
},
{
"path": "examples/page-wrap.txt",
"chars": 10962,
"preview": "const HR = () => (\n <View style={styles.hr} />\n);\n\nconst ChapterHeading = ({ number, children, ...props }) => (\n <View"
},
{
"path": "examples/path.txt",
"chars": 384,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/picker-formlist.txt",
"chars": 4366,
"preview": "const Combos = () => {\n // Static List of names from https://restcountries.com\n const countries = [\"Afghanistan\", \"Alb"
},
{
"path": "examples/polygon.txt",
"chars": 379,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/polyline.txt",
"chars": 375,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/quick-start.txt",
"chars": 644,
"preview": "// import React from 'react';\n// import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';\n\n// Creat"
},
{
"path": "examples/radialgradient.txt",
"chars": 524,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/rect.txt",
"chars": 474,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/resume.txt",
"chars": 7942,
"preview": "const styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n '@media max-width: 400': {\n flexDir"
},
{
"path": "examples/styles.txt",
"chars": 344,
"preview": "const styles = StyleSheet.create({\n page: { backgroundColor: 'tomato' },\n section: { color: 'white', textAlign: 'cente"
},
{
"path": "examples/svg.txt",
"chars": 19528,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst Tiger = () => (\n <Svg style={{ width: 400, heigh"
},
{
"path": "examples/svgtext.txt",
"chars": 304,
"preview": "const styles = StyleSheet.create({\n page: { padding: 60 },\n});\n\nconst doc = (\n <Document>\n <Page style={styles.page"
},
{
"path": "examples/text.txt",
"chars": 2965,
"preview": "const styles = StyleSheet.create({\n title: {\n margin: 20,\n fontSize: 25,\n textAlign: 'center',\n backgroundC"
},
{
"path": "examples/textinput.txt",
"chars": 1878,
"preview": "const UserInformation = () => (\n <View>\n <Text style={styles.heading}>User Information</Text>\n <View style={style"
},
{
"path": "next.config.js",
"chars": 512,
"preview": "module.exports = {\n swcMinify: false,\n webpack: (config, options) => {\n config.module.rules.push({\n test: /\\.m"
},
{
"path": "next.config_old.js",
"chars": 442,
"preview": "module.exports = {\n webpack: (config, options) => {\n config.module.rules.push({\n test: /\\.md/,\n use: [opti"
},
{
"path": "now.json",
"chars": 48,
"preview": "{\n \"name\": \"@react-pdf/site\",\n \"version\": 2\n}\n"
},
{
"path": "package.json",
"chars": 1692,
"preview": "{\n \"name\": \"@react-pdf/site\",\n \"version\": \"1.0.0\",\n \"license\": \"MIT\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"n"
},
{
"path": "pages/_app.js",
"chars": 1194,
"preview": "import React from 'react';\nimport { MDXProvider } from '@mdx-js/react';\nimport { Analytics } from '@vercel/analytics/rea"
},
{
"path": "pages/_document.js",
"chars": 2536,
"preview": "import { extractCritical } from 'emotion-server'\nimport Document, { Html, Head, Main, NextScript } from 'next/document';"
},
{
"path": "pages/advanced.js",
"chars": 244,
"preview": "import React from 'react';\n\nimport Layout from '../src/components/Layout';\nimport Advanced from '../docs/advanced.md';\n\n"
},
{
"path": "pages/blog/[slug].js",
"chars": 5350,
"preview": "import React from 'react';\nimport Head from 'next/head';\nimport styled from '@emotion/styled';\nimport { parse, format } "
},
{
"path": "pages/compatibility.js",
"chars": 274,
"preview": "import React from 'react';\n\nimport Layout from '../src/components/Layout';\nimport Compatibility from '../docs/compatibil"
},
{
"path": "pages/components.js",
"chars": 254,
"preview": "import React from 'react';\n\nimport Layout from '../src/components/Layout';\nimport Components from '../docs/components.md"
},
{
"path": "pages/fonts.js",
"chars": 229,
"preview": "\nimport React from 'react';\n\nimport Fonts from '../docs/fonts.md'\nimport Layout from '../src/components/Layout';\n\nconst "
},
{
"path": "pages/form.js",
"chars": 215,
"preview": "import React from \"react\";\n\nimport FORM from \"../docs/form.md\";\nimport Layout from \"../src/components/Layout\";\n\nconst FO"
},
{
"path": "pages/hooks.js",
"chars": 229,
"preview": "\nimport React from 'react';\n\nimport Hooks from '../docs/hooks.md'\nimport Layout from '../src/components/Layout';\n\nconst "
},
{
"path": "pages/index.js",
"chars": 1316,
"preview": "import React from 'react';\nimport Link from 'next/link';\nimport styled from '@emotion/styled';\nimport dynamic from 'next"
},
{
"path": "pages/node.js",
"chars": 224,
"preview": "\nimport React from 'react';\n\nimport Node from '../docs/node.md'\nimport Layout from '../src/components/Layout';\n\nconst No"
},
{
"path": "pages/rendering-process.js",
"chars": 285,
"preview": "\nimport React from 'react';\n\nimport Layout from '../src/components/Layout';\nimport RenderingProcess from '../docs/render"
},
{
"path": "pages/repl.js",
"chars": 6038,
"preview": "import dynamic from 'next/dynamic';\nimport styled from '@emotion/styled';\nimport { useAsync } from 'react-use';\nimport {"
},
{
"path": "pages/styling.js",
"chars": 239,
"preview": "\nimport React from 'react';\n\nimport Styling from '../docs/styling.md'\nimport Layout from '../src/components/Layout';\n\nco"
},
{
"path": "pages/svg.js",
"chars": 219,
"preview": "\nimport React from 'react';\n\nimport SVG from '../docs/svg.md'\nimport Layout from '../src/components/Layout';\n\nconst SVGP"
},
{
"path": "prettier.config.js",
"chars": 67,
"preview": "module.exports = {\n singleQuote: true,\n trailingComma: 'all',\n};\n"
},
{
"path": "public/favicons/browserconfig.xml",
"chars": 268,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig>\n <msapplication>\n <tile>\n <square150x150logo"
},
{
"path": "public/favicons/site.webmanifest",
"chars": 488,
"preview": "{\n \"name\": \"React-pdf\",\n \"short_name\": \"React-pdf\",\n \"icons\": [\n {\n \"src\": \"/favicons/android"
},
{
"path": "public/scripts/pdf.worker.js",
"chars": 983040,
"preview": "/**\n * @licstart The following is the entire license notice for the\n * Javascript code in this page\n *\n * Copyright 2017"
},
{
"path": "public/styles/codemirror.css",
"chars": 2409,
"preview": ".CodeMirror {\n font-size: 14px;\n height: 100%;\n background-color: #2c2c2c;\n}\n\n@media (max-width: 36em) {\n .CodeMirro"
},
{
"path": "public/styles/fonts.css",
"chars": 524,
"preview": "@font-face {\n\tfont-family: \"Source Sans Pro\";\n src: url(\"/fonts/SourceSansPro-Regular.ttf\");\n font-weight: normal;\n f"
},
{
"path": "public/styles/index.css",
"chars": 577,
"preview": "* {\n margin: 0px;\n padding: 0px;\n box-sizing: border-box;\n}\n\n*::selection {\n color: #3E3E3E;\n background: #FCD3CC;\n"
},
{
"path": "public/styles/prism.css",
"chars": 2458,
"preview": "/**\n * prism.js default theme for JavaScript, CSS and HTML\n * Based on dabblet (http://dabblet.com)\n * @author Lea Verou"
},
{
"path": "public/styles/tooltips.css",
"chars": 194,
"preview": ".tippy-popper {\n top: -3px !important;\n left: -6px !important;\n}\n\n.tippy-tooltip {\n color: #8D1602;\n background-colo"
},
{
"path": "src/components/Docs/DebugSample/DebugSample.js",
"chars": 1836,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\n\nimport media from '../../../styled/media';\n\nconst CONT"
},
{
"path": "src/components/Docs/DebugSample/index.js",
"chars": 70,
"preview": "import DebugSample from './DebugSample';\n\nexport default DebugSample;\n"
},
{
"path": "src/components/Docs/EditButton/EditButton.js",
"chars": 506,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\n\nimport Button from '../../UI/Button';\nimport media fro"
},
{
"path": "src/components/Docs/EditButton/index.js",
"chars": 67,
"preview": "import EditButton from './EditButton';\n\nexport default EditButton;\n"
},
{
"path": "src/components/Docs/GoToExample/GoToExample.js",
"chars": 488,
"preview": "import React from 'react';\nimport Link from 'next/link';\nimport styled from '@emotion/styled';\n\nimport Button from '../."
},
{
"path": "src/components/Docs/GoToExample/index.js",
"chars": 70,
"preview": "import GoToExample from './GoToExample';\n\nexport default GoToExample;\n"
},
{
"path": "src/components/Docs/NavigationButtons/NavigationButtons.js",
"chars": 1021,
"preview": "import React from 'react';\nimport Link from 'next/link';\nimport styled from '@emotion/styled';\n\nimport Button from '../."
},
{
"path": "src/components/Docs/NavigationButtons/index.js",
"chars": 88,
"preview": "import NavigationButtons from './NavigationButtons';\n\nexport default NavigationButtons;\n"
},
{
"path": "src/components/Docs/OverviewTimeline/OverviewTimeline.js",
"chars": 3049,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\n\nimport Icon from '../../UI/Icon';\nimport media from '."
},
{
"path": "src/components/Docs/OverviewTimeline/index.js",
"chars": 85,
"preview": "import OverviewTimeline from './OverviewTimeline';\n\nexport default OverviewTimeline;\n"
},
{
"path": "src/components/Layout/GitHubIcon.js",
"chars": 473,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\n\nimport Icon from '../UI/Icon';\n\nconst GitHubIcon = sty"
},
{
"path": "src/components/Layout/Header.js",
"chars": 1210,
"preview": "import React from 'react';\nimport Link from 'next/link';\nimport styled from '@emotion/styled';\nimport { withRouter } fro"
},
{
"path": "src/components/Layout/Layout.js",
"chars": 1351,
"preview": "import React, { useState } from 'react';\nimport styled from '@emotion/styled';\n\nimport Menu from './Menu';\nimport Header"
},
{
"path": "src/components/Layout/Menu.js",
"chars": 6842,
"preview": "import React from 'react';\nimport Link from 'next/link';\nimport styled from '@emotion/styled';\nimport { withRouter } fro"
},
{
"path": "src/components/Layout/VersionPicker.js",
"chars": 2265,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\nimport { useToggle } from 'react-use';\n\nimport Icon fro"
},
{
"path": "src/components/Layout/index.js",
"chars": 55,
"preview": "import Layout from './Layout';\n\nexport default Layout;\n"
},
{
"path": "src/components/Repl/BackButton.js",
"chars": 442,
"preview": "import React from 'react';\nimport Router from 'next/router';\n\nconst onBackClick = () => {\n const lastPage = document.re"
},
{
"path": "src/components/Repl/Catch.js",
"chars": 386,
"preview": "import React, { Children } from 'react';\n\nclass Catch extends React.Component {\n state = {\n error: undefined,\n };\n\n"
},
{
"path": "src/components/Repl/CodeEditor.js",
"chars": 1749,
"preview": "import React, { useRef, useEffect } from 'react';\n\nlet CodeMirror;\n\nconst DEFAULT_CODE_MIRROR_OPTIONS = {\n autoCloseBra"
},
{
"path": "src/components/Repl/ErrorMessage.js",
"chars": 718,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\n\nimport Icon from '../UI/Icon';\n\nconst Wrapper = styled"
},
{
"path": "src/components/Repl/PDFViewer.js",
"chars": 3697,
"preview": "import styled from '@emotion/styled';\nimport React, { useEffect, useState } from 'react';\nimport { pdf } from '@react-pd"
},
{
"path": "src/components/Repl/PageNavigator.js",
"chars": 1053,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\n\nimport Icon from '../UI/Icon';\n\nconst Wrapper = styled"
},
{
"path": "src/components/Repl/Repl.js",
"chars": 2651,
"preview": "import dynamic from 'next/dynamic';\nimport styled from '@emotion/styled';\nimport { useMount } from 'react-use';\nimport d"
},
{
"path": "src/components/Repl/ReplFooter.js",
"chars": 1693,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\nimport ReactPDF from '@react-pdf/renderer';\n\nimport But"
},
{
"path": "src/components/Repl/ReplHeader.js",
"chars": 1537,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\n\nimport Icon from '../UI/Icon';\nimport BackButton from "
},
{
"path": "src/components/Repl/index.js",
"chars": 49,
"preview": "import Repl from './Repl';\n\nexport default Repl;\n"
},
{
"path": "src/components/UI/Blockquote/Blockquote.js",
"chars": 317,
"preview": "import styled from '@emotion/styled';\n\nconst Blockquote = styled.blockquote`\n padding: 8px 30px;\n margin: 32px 0px;\n "
},
{
"path": "src/components/UI/Blockquote/index.js",
"chars": 67,
"preview": "import Blockquote from './Blockquote';\n\nexport default Blockquote;\n"
},
{
"path": "src/components/UI/Button/Button.js",
"chars": 1668,
"preview": "import React from 'react';\nimport { css } from '@emotion/core';\nimport styled from '@emotion/styled';\nimport { defaultPr"
},
{
"path": "src/components/UI/Button/index.js",
"chars": 55,
"preview": "import Button from './Button';\n\nexport default Button;\n"
},
{
"path": "src/components/UI/Clipboard/Clipboard.js",
"chars": 580,
"preview": "import React, { useState } from 'react';\nimport { Tooltip } from 'react-tippy';\nimport { CopyToClipboard } from 'react-c"
},
{
"path": "src/components/UI/Clipboard/index.js",
"chars": 64,
"preview": "import Clipboard from './Clipboard';\n\nexport default Clipboard;\n"
},
{
"path": "src/components/UI/CodeBlock/CodeBlock.js",
"chars": 869,
"preview": "import React from 'react';\nimport Prism from 'prismjs';\nimport styled from '@emotion/styled';\nimport { PrismCode } from "
},
{
"path": "src/components/UI/CodeBlock/index.js",
"chars": 64,
"preview": "import CodeBlock from './CodeBlock';\n\nexport default CodeBlock;\n"
},
{
"path": "src/components/UI/Heading/Heading.js",
"chars": 2394,
"preview": "import React from 'react';\nimport { css } from '@emotion/core';\nimport styled from '@emotion/styled';\nimport { withProps"
},
{
"path": "src/components/UI/Heading/index.js",
"chars": 27,
"preview": "export * from './Heading';\n"
},
{
"path": "src/components/UI/Icon/Icon.js",
"chars": 1753,
"preview": "/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\nimport React from 'r"
},
{
"path": "src/components/UI/Icon/index.js",
"chars": 49,
"preview": "import Icon from './Icon';\n\nexport default Icon;\n"
},
{
"path": "src/components/UI/InlineCode/InlineCode.js",
"chars": 303,
"preview": "import styled from '@emotion/styled';\n\nconst InlineCode = styled.code`\n font-size: 16px;\n padding: 4px 6px;\n line-hei"
},
{
"path": "src/components/UI/InlineCode/index.js",
"chars": 67,
"preview": "import InlineCode from './InlineCode';\n\nexport default InlineCode;\n"
},
{
"path": "src/components/UI/Link/Link.js",
"chars": 758,
"preview": "import styled from '@emotion/styled';\n\nconst Wrapper = styled.a`\n font-size: inherit;\n line-height: 24px;\n text-decor"
},
{
"path": "src/components/UI/Link/index.js",
"chars": 49,
"preview": "import Link from './Link';\n\nexport default Link;\n"
},
{
"path": "src/components/UI/List/List.js",
"chars": 1048,
"preview": "import React from 'react';\nimport { css } from '@emotion/core';\nimport styled from '@emotion/styled';\n\nimport media from"
},
{
"path": "src/components/UI/List/index.js",
"chars": 49,
"preview": "import List from './List';\n\nexport default List;\n"
},
{
"path": "src/components/UI/ListItem/ListItem.js",
"chars": 348,
"preview": "import styled from '@emotion/styled';\n\nimport media from '../../../styled/media';\n\nconst ListItem = styled.li`\n color: "
},
{
"path": "src/components/UI/ListItem/index.js",
"chars": 61,
"preview": "import ListItem from './ListItem';\n\nexport default ListItem;\n"
},
{
"path": "src/components/UI/Logo/Logo.js",
"chars": 909,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/core';\n\nimport { H1"
},
{
"path": "src/components/UI/Logo/index.js",
"chars": 49,
"preview": "import Logo from './Logo';\n\nexport default Logo;\n"
},
{
"path": "src/components/UI/PageBanner/PageBanner.js",
"chars": 489,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\n\nconst Wrapper = styled.div`\n top: 0;\n left: 0;\n wid"
},
{
"path": "src/components/UI/PageBanner/index.js",
"chars": 67,
"preview": "import PageBanner from './PageBanner';\n\nexport default PageBanner;\n"
},
{
"path": "src/components/UI/Paragraph/Paragraph.js",
"chars": 315,
"preview": "import styled from '@emotion/styled';\n\nimport media from '../../../styled/media';\n\nconst Paragraph = styled.p`\n font-si"
},
{
"path": "src/components/UI/Paragraph/index.js",
"chars": 64,
"preview": "import Paragraph from './Paragraph';\n\nexport default Paragraph;\n"
},
{
"path": "src/components/UI/Spinner/Spinner.js",
"chars": 423,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\n\nimport Logo from '../Logo';\n\nconst Wrapper = styled.di"
},
{
"path": "src/components/UI/Spinner/index.js",
"chars": 58,
"preview": "import Spinner from './Spinner';\n\nexport default Spinner;\n"
},
{
"path": "src/components/UI/Table/Table.js",
"chars": 1671,
"preview": "import styled from '@emotion/styled';\n\nimport media from '../../../styled/media';\n\nconst Wrapper = styled.div`\n width: "
},
{
"path": "src/components/UI/Table/index.js",
"chars": 77,
"preview": "import Table from './Table';\n\nexport * from './Table';\nexport default Table;\n"
},
{
"path": "src/components/UI/ThematicBreak/ThematicBreak.js",
"chars": 164,
"preview": "import styled from '@emotion/styled';\n\nconst ThematicBreak = styled.hr`\n width: 20px;\n margin-top: 33px;\n margin-bott"
},
{
"path": "src/components/UI/ThematicBreak/index.js",
"chars": 76,
"preview": "import ThematicBreak from './ThematicBreak';\n\nexport default ThematicBreak;\n"
},
{
"path": "src/components/UI/Title/Title.js",
"chars": 999,
"preview": "import React from 'react';\nimport styled from '@emotion/styled';\n\nimport { H1, H4 } from '..//Heading';\nimport media fro"
},
{
"path": "src/components/UI/Title/index.js",
"chars": 52,
"preview": "import Title from './Title';\n\nexport default Title;\n"
},
{
"path": "src/lib/compress.js",
"chars": 557,
"preview": "import LZString from 'lz-string';\n\nconst decimalToHex = (d) => {\n let hex = Number(d).toString(16);\n const padding = 2"
},
{
"path": "src/lib/markdown.js",
"chars": 884,
"preview": "import Link from '../components/UI/Link';\nimport List from '../components/UI/List';\nimport ListItem from '../components/"
},
{
"path": "src/lib/toLowerCase.js",
"chars": 73,
"preview": "export default string => string.trim().toLowerCase().replace(/ /g, '-');\n"
},
{
"path": "src/lib/transpile.js",
"chars": 1363,
"preview": "import React from 'react';\nimport { transform } from 'buble';\nimport {\n Page,\n Text,\n Link,\n Font,\n View,\n Canvas,"
},
{
"path": "src/styled/media.js",
"chars": 146,
"preview": "export default {\n desktop: `@media (max-width: ${992}px)`,\n tablet: `@media (max-width: ${768}px)`,\n phone: `@media ("
},
{
"path": "src/styled/theme.js",
"chars": 204,
"preview": "const theme = {\n black: '#3E3E3E',\n gray1: '#A6A6A6',\n gray2: '#F1F1F1',\n gray3: '#F8F8F8',\n red: '#F22300',\n ligh"
}
]
About this extraction
This page contains the full source code of the diegomura/react-pdf-site GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 160 files (1.2 MB), approximately 346.5k tokens, and a symbol index with 654 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.