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.

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

const Row = () => (
  <View style={{ flexDirection: 'row', gap: 10 }}>
    <View style={{ flex: 1, backgroundColor: '#eee', padding: 8 }}>
      <Text>Sidebar</Text>
    </View>
    <View style={{ flex: 2, padding: 8 }}>
      <Text>Content</Text>
    </View>
  </View>
);

Show preview

Valid props

Prop name	Description	Type	Default
wrap	Enable/disable page wrapping for element. See more	Boolean	true
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
fixed	Render 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
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