@ballerine/react-pdf-toolkit

react-pdf-toolkit

react-pdf-toolkit is a package for generating PDF documents in React applications. Built on top of @react-pdf/renderer, it uses Tailwind CSS for styling, providing a set of components that simplify PDF creation.

Features

• Core Integration: Utilizes @react-pdf/renderer for robust PDF rendering capabilities.
• Tailwind CSS Styling: Applies Tailwind CSS for styling, ensuring a seamless and efficient design workflow.
• Component-Based: Offers a collection of reusable components for quick and efficient PDF creation.

Components

• Badge

• Divider

• Image

• Link

• Typography

• List

Utils

tw - wrapper which converts tailwind classes to pdf styles.

Example:

tw('flex flex-row gap-4')

mergeStyles - merges set of style objects in to single one.

mergeStyles([tw('flex'), tw('flex-row')]) // {display: 'flex', flexDirection: 'row'}

sanitizeString - Removes emoji from string value.

toTitleCase - Converts string to Title case format.

Hocs

withDataValidation - Component wrapper to perform validation. Wraps provided component and performs validation. Accepts json schema or Typebox output.

import { Type } from "@sinclair/typebox";
import { Page, View } from "@react-pdf/renderer";
import {Typography} from "@ballerine/react-pdf-toolkit"

const Schema =  Type.Object({
title: Type.String()
});

interface IPDFElementProps {
	 data: Static<typeof Schema>
}

const PDFElement = withDataValidation(({data}) =>
<Page>
	<View>
		<Typography>{data.title}</Typography>
	</View>
</Page>,
Schema) // Will throw exception in case if props.data doesnt match schema.

Installation

pnpm install @ballerine/react-pdf-toolkit

Example PDF

import { Page, View, Document } from '@react-pdf/renderer';
import {Typography} from '@ballerine/react-pdf-toolkit'

const Example = () => {
	return <Document>
		<Page>
		<View style={tw('flex flex-col')}>
			<Typography weight="bold" size="heading">Hello world!</Typography>
			<View>
				<Typography>I am PDF document.</Typography>
			</View>
		</View>
		</Page>
	</Document>
}