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

To help you get started, we’ve selected a few @react-pdf/renderer examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github n6g7 / httpdf / __tests__ / documents / demo.js View on Github external
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 (
      <Document>
github tarique93102 / countenance / src / app / pages / resume / pdf-document.js View on Github external
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,
github bcgov / range-web / src / components / rangeUsePlanPage / pdf / pdf / AdditionalRequirements.js View on Github external
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: {}
})
github bcgov / range-web / src / components / rangeUsePlanPage / pdf / pdf / BasicInformation.js View on Github external
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
  }
})
github bcgov / range-web / src / components / rangeUsePlanPage / pdf / pdf / common / Table.js View on Github external
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%',
github n6g7 / httpdf / example / documents / Side.js View on Github external
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 (
github bcgov / range-web / src / components / rangeUsePlanPage / pdf / pdf / MinisterIssues.js View on Github external
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 }) => (
  <Page size="A4" style={styles.page}>
    <Header plan={plan} />

    <Title>Minister&apos;s Issues and Actions</Title>

    <Subtext>
      If more than one readiness criteria is provided, all such criteria must be
github bcgov / range-web / src / components / rangeUsePlanPage / pdf / pdf / common / Label.js View on Github external
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 = {} }) => (
  <Text style={[styles.label, style]}>{children}</Text>
)

export default Label
github bcgov / range-web / src / components / rangeUsePlanPage / pdf / pdf / common / SectionHeader.js View on Github external
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 = {} }) => (
  <Text
    style={[
      styles.sectionHeader,
      {
        color: secondary ? config.primaryColor : config.blackColor,
        fontSize: secondary
          ? config.sectionTitleFontSize - 1
          : config.sectionTitleFontSize
github bcgov / range-web / src / components / rangeUsePlanPage / pdf / pdf / Criteria.js View on Github external
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: {

@react-pdf/renderer

Create PDF files on the browser and server

MIT
Latest version published 23 days ago

Package Health Score

91 / 100
Full package analysis

Similar packages