Text

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

import { Text } from '@react-pdf/renderer';

const Heading = () => (
  <Text style={{ fontSize: 18, marginBottom: 6 }}>
    Hello <Text style={{ color: 'tomato' }}>world</Text>
  </Text>
);

Show preview

Valid props

Prop name	Description	Type	Default
wrap	Enables/disables page wrapping for element. See more	Boolean	true
render	Renders 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
fixed	Renders component in all wrapped pages. See more	Boolean	false
break	Forces the wrapping algorithm to start a new page when rendering this element. See more	Boolean	false
minPresenceAhead	Hint that no page wrapping should occur between all sibling elements following the element within n points. See more	Number	0
hyphenationCallback	Specify hyphenation callback at a text level. See hypthenation	Function	undefined
hyphenationPenalty	Specify at what level words are hyphenated. See more	Number	undefined
id	Destination ID to be linked to. See more	String	undefined
bookmark	Attach bookmark to element. See more	String or Bookmark	undefined

Valid props

On this page