React-pdf

Edit

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 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 nameDescriptionTypeDefault
titleSets title info on the document's metadataStringundefined
authorSets author info on the document's metadataStringundefined
subjectSets subject info on the document's metadataStringundefined
keywordsSets keywords associated info on the document's metadataStringundefined
creatorSets creator info on the document's metadataString"react-pdf"
producerSets producer info on the document's metadataString"react-pdf"
pdfVersionSets PDF version for generated documentString"1.3"
languageSets PDF default languageStringundefined
pageModeSpecifying how the document should be displayed when openedPageModeuseNone
pageLayoutThis controls how (some) PDF viewers choose to show pagesPageLayoutsinglePage
onRenderCallback after document renders. Receives document blob argument in webFunctionundefined
PageMode type

pageMode prop can take one of the following values. Take into account some viewers might ignore this setting.

ValueDescription
useNoneNeither document bookmarks nor thumbnail images visible
useOutlinesDocument bookmarks visible
useThumbsThumbnail images visible
fullScreenFull-screen mode, with no menu bar, window controls, or any other window visible
useOCOptional content group panel visible
useAttachmentsAttachments panel visible
PageLayout type

pageLayout prop can take one of the following values. Take into account some viewers might ignore this setting.

ValueDescription
singlePageDisplay one page at a time
oneColumnDisplay the pages in one column
twoColumnLeftDisplay the pages in two columns, with odd numbered pages on the left
twoColumnRightDisplay the pages in two columns, with odd numbered pages on the right
twoPageLeftDisplay the pages two at a time, with odd-numbered pages on the left
twoPageRightDisplay 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 nameDescriptionTypeDefault
sizeDefines page size. If String, must be one of the available page sizes. Height is optional, if ommited it will behave as "auto".String, Array, Number, Object"A4"
orientationDefines page orientation. Valid values: "portrait" or "landscape"String"portrait"
wrapEnables page wrapping for this page. See moreBooleantrue
styleDefines page styles. See moreObject, Arrayundefined
debugEnables debug mode on page bounding box. See moreBooleanfalse
dpiEnables setting a custom DPI for page contents.Number72
idDestination ID to be linked to. See moreStringundefined
bookmarkAttach bookmark to element. See moreString or Bookmarkundefined

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 nameDescriptionTypeDefault
wrapEnable/disable page wrapping for element. See moreBooleantrue
styleDefines view styles. See moreObject, Arrayundefined
renderRender dynamic content based on context. See moreFunctionundefined
debugEnables debug mode on view bounding box. See moreBooleanfalse
fixedRender component in all wrapped pages. See moreBooleanfalse
idDestination ID to be linked to. See moreStringundefined
bookmarkAttach bookmark to element. See moreString or Bookmarkundefined

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 nameDescriptionTypeDefault
srcSource of the image. See moreSource objectundefined
sourceAlias of src. See moreSource objectundefined
styleDefines view styles. See moreObject, Arrayundefined
debugEnables debug mode on view bounding box. See moreBooleanfalse
fixedRenders component in all wrapped pages. See moreBooleanfalse
cacheEnables image caching between consecutive rendersBooleantrue
bookmarkAttach bookmark to element. See moreString or Bookmarkundefined
Source object

Defines the source of an image. Can be in any of these four valid forms:

Form typeDescriptionExample
StringValid image URL or filesystem path (Node only)www.react-pdf.org/test.jpg
URL objectEnables to pass extra parameters on how to fetch images{ uri: valid-url, method: 'GET', headers: {}, body: '' }
BufferRenders image directly from Buffer. Image format (png or jpg) will be guessed based on Buffer.Buffer
Data bufferRenders 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' }
FunctionA function that returns (can also return a promise that resolves to) any of the above formats() => String \| Promise<String>

Text

A React component for displaying text. Text supports nesting of other Text or Link components to create inline styling.

Valid props

Prop nameDescriptionTypeDefault
wrapEnables/disables page wrapping for element. See moreBooleantrue
renderRenders dynamic content based on context. See moreFunctionundefined
styleDefines view styles. See moreObject, Arrayundefined
debugEnables debug mode on view bounding box. See moreBooleanfalse
fixedRenders component in all wrapped pages. See moreBooleanfalse
hyphenationCallbackSpecify hyphenation callback at a text level. See hypthenationFunctionundefined
idDestination ID to be linked to. See moreStringundefined
bookmarkAttach bookmark to element. See moreString or Bookmarkundefined

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 nameDescriptionTypeDefault
srcValid URL or destination ID. ID must be prefixed with #. See moreStringundefined
wrapEnable/disable page wrapping for element. See moreBooleantrue
styleDefines view styles. See moreObject, Arrayundefined
debugEnables debug mode on view bounding box. See moreBooleanfalse
fixedRender component in all wrapped pages. See moreBooleanfalse
bookmarkAttach bookmark to element. See moreString or Bookmarkundefined

Note

A React component for displaying a note annotation inside the document.

Valid props

Prop nameDescriptionTypeDefault
styleDefines view styles. See moreObject, Arrayundefined
childrenNote string contentStringundefined
fixedRenders component in all wrapped pages. See moreBooleanfalse

Canvas

A React component for freely drawing any content on the page.

Valid props

Prop nameDescriptionTypeDefault
styleDefines view styles. See moreObject, Arrayundefined
paintPainter functionFunctionundefined
debugEnables debug mode on view bounding box. See moreBooleanfalse
fixedRenders component in all wrapped pages. See moreBooleanfalse
bookmarkAttach bookmark to element. See moreString or Bookmarkundefined

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.

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 nameDescriptionTypeDefault
styleDefines iframe stylesObject, Arrayundefined
classNameDefines iframe class nameString undefined
childrenPDF document implementationDocumentundefined
widthWidth of embedded PDF iframeString, Numberundefined
heightHeight of embedded PDF iframeString, Numberundefined
showToolbarRender the toolbar. Supported on Chrome, Edge and SafariBooleantrue

Other props are passed through to the iframe.


Anchor tag to enable generate and download PDF documents on the fly. Refer to on the fly rendering for more information.

Valid props

Prop nameDescriptionTypeDefault
documentPDF document implementationDocumentundefined
fileNameDownload PDF file nameStringundefined
styleDefines anchor tag stylesObject, Arrayundefined
classNameDefines anchor tag class nameStringundefined
childrenAnchor tag contentDOM node, Functionundefined

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 nameDescriptionTypeDefault
documentPDF document implementationDocumentundefined
childrenRender prop with blob, url, error and loading state as argumentsFunctionundefined

← Rendering process