How to use @react-pdf/renderer - 10 common examples

import React, { PureComponent } from "react"
import PropTypes from "prop-types"
import { Page, Document, StyleSheet } from "@react-pdf/renderer"

import { Side } from "./components"

const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#E4E4E4",
  },
})

export default class Test extends PureComponent {
  static document = true
  static propTypes = {
    a: PropTypes.string.isRequired,
    b: PropTypes.string.isRequired,
  }

  render() {
    return (

import React, { Fragment } from 'react';
import { Document, Page, View, Text, StyleSheet, Link } from '@react-pdf/renderer';

const styles = StyleSheet.create({
    page: {
        flexDirection: "column",
        padding: 40,
        fontSize: 12
    },
    section: {
        paddingBottom: 20
    },
    headText: {
        color: "blue",
        fontWeight: 300,
        paddingBottom: 3,
        fontSize: 15
    },
    secondaryText: {
        opacity: 0.8,

import React from 'react'
import { View, Page, StyleSheet, Text } from '@react-pdf/renderer'
import Footer from './Footer'
import Header from './Header'
import Title from './common/Title'
import { config } from './common/config'
import Subtext from './common/Subtext'
import { handleNullValue } from '../helper'
import Label from './common/Label'
import Row from './common/Row'

const styles = StyleSheet.create({
  page: {
    padding: 50,
    paddingTop: 70,
    fontFamily: config.fontFamily,
    fontSize: config.normalFontSize
  },
  container: {
    display: 'flex',
    flexDirection: 'row',
    width: '100%',
    marginBottom: 5
  },
  category: {},
  details: {}
})

import Title from './common/Title'
import Field from './common/Field'
import Line from './common/Line'
import { config } from './common/config'
import {
  getAgreementType,
  getDistrict,
  getUserFullName,
  getAgreementExemptionStatus,
  getClientFullName,
  getContactRole
} from '../helper'
import Row from './common/Row'
import SectionHeader from './common/SectionHeader'

const styles = StyleSheet.create({
  page: {
    padding: 50,
    paddingTop: 70,
    fontFamily: config.fontFamily,
    fontSize: config.normalFontSize
  },
  row: {
    display: 'flex',
    flexDirection: 'row',
    width: '100%'
  },
  section: {
    flex: 1
  }
})

import React from 'react'
import { View, StyleSheet, Text } from '@react-pdf/renderer'
import { config } from './config'

const styles = StyleSheet.create({
  table: {
    width: '100%'
  },
  header: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: config.primaryColor,
    color: '#fff',
    padding: 3
  },
  headerCell: {
    fontWeight: 'heavy',
    white: '#fff',
    width: '11.11%',

import React, { PureComponent } from "react"
import PropTypes from "prop-types"
import { Text, View, StyleSheet } from "@react-pdf/renderer"

const styles = StyleSheet.create({
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
    width: "50%",
  },
})

export default class Side extends PureComponent {
  static propTypes = {
    children: PropTypes.node,
    text: PropTypes.string.isRequired,
  }

  render() {
    return (

import React from 'react'
import { View, Page, StyleSheet, Text } from '@react-pdf/renderer'
import Footer from './Footer'
import Header from './Header'
import Title from './common/Title'
import { config } from './common/config'
import Subtext from './common/Subtext'
import SectionHeader from './common/SectionHeader'
import Field from './common/Field'
import { formatMinisterIssues } from '../helper'
import MinisterIssueActions from './MinisterIssueActions'

const styles = StyleSheet.create({
  page: {
    padding: 50,
    paddingTop: 70,
    fontFamily: config.fontFamily,
    fontSize: config.normalFontSize
  }
})

const MinisterIssues = ({ plan }) => (
  
    <header>

    <title>Minister's Issues and Actions</title>

    
      If more than one readiness criteria is provided, all such criteria must be</header>

import React from 'react'
import { Text, StyleSheet } from '@react-pdf/renderer'
import { config } from './config'

const styles = StyleSheet.create({
  label: {
    flex: 1,
    color: config.blackColor,
    fontSize: config.normalFontSize + 1,
    marginBottom: 3,
    fontWeight: 'bold'
  }
})

const Label = ({ children, style = {} }) => (
  
)

export default Label

import React from 'react'
import { Text, StyleSheet } from '@react-pdf/renderer'
import { config } from './config'

const styles = StyleSheet.create({
  sectionHeader: {
    fontWeight: 'bold',
    margin: '5px 0',
    flex: 1
  }
})

const SectionHeader = ({ children, secondary = false, style = {} }) => (

import React from 'react'
import Field from './common/Field'
import Row from './common/Row'
import SectionHeader from './common/SectionHeader'
import { View, Text, StyleSheet } from '@react-pdf/renderer'
import { config } from './common/config'
import IndicatorPlants from './IndicatorPlants'

const styles = StyleSheet.create({
  container: {
    color: config.grayColor,
    fontSize: config.normalFontSize
  },
  subtext: {
    color: config.grayColor,
    fontSize: config.normalFontSize + 1,
    marginBottom: 5
  },
  label: {
    flex: 1,
    color: config.blackColor,
    fontSize: config.normalFontSize + 1,
    marginBottom: 3
  },
  header: {