React-pdf

Components

React-pdf follows the 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 allows you to structure your PDF document.

Document

This component represent the PDF document itself. It must be the root of your tree element structure, and under no circumstances should it be used as children of another react-pdf component. In addition, it should only have childs 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"
onRender Callback after document renders. Receives document blob argument in web Function undefined
shallow (Web only) Enable shallow document rendering. See more Boolean false
width (Web only) Width of embedded PDF iframe String, Number undefined
height (Web only) Height of embedded PDF iframe String, Number undefined
style (Web only) Style of embedded PDF iframe Object undefined
className (Web only) Class name of embedded PDF iframe String undefined

Page

Represents single page inside the PDF document, or a subset of them if using the wrapping feature. A <Document /> can contain as many pages as you want, but ensure not rendering a page inside any component besides Document.

Valid props

Prop name Description Type Default
size Defines page size. See available page sizes String, Object, Array "A4"
orientation Defines page orientation. Valid values: "portrait" or "landscape" String "portrait"
wrap Enable page wrapping for this page. See more Boolean false
style Defines page styles. See more Object, Array undefined
debug Enables debug mode on page bounding box. See more Boolean false
ruler Enables vertical and horizontal rulers on page. See more Boolean false
rulerSteps Grid separation for horizontal and vertical rulers See more Integer Float String 50
verticalRuler Enables vertical ruler on page. See more Boolean false
verticalRulerSteps Grid separation for vertical ruler See more Integer Float String 50
horizontalRuler Enables horizontal ruler on page. See more Boolean false
horizontalRulerSteps Grid separation for horizontal rulers See more Integer Float String 50

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 Boolean false
style Defines view styles. See more Object, Array undefined
render Render dynamic content based on context See more Function undefined
debug Enables debug mode on view bounding box. See more Boolean false

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 Valid image URL String undefined
style Defines view styles. See more Object, Array undefined
debug Enables debug mode on view bounding box. See more Boolean false

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 Enable/disable page wrapping for element See more Boolean true
render Render dynamic content based on context See more Function undefined
style Defines view styles. See more Object, Array undefined
debug Enables debug mode on view bounding box. See more Boolean false

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 String undefined
wrap Enable/disable page wrapping for element See more Boolean true
style Defines view styles. See more Object, Array undefined
debug Enables debug mode on view bounding box. See more Boolean false

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

Anchor tag to enable generate and download PDF documents on the fly. Refer to 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

BlobProvider Web only

Easy and declarative way of getting document's blob data without showing it on screen. Refer to 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