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.
-
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.
-
Badge
-
Divider
-
Image
-
Link
-
Typography
-
List
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.
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.
pnpm install @ballerine/react-pdf-toolkit
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>
}