@ballerine/react-pdf-toolkit
v1.2.42
Published
`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.
Downloads
1,282
Keywords
Readme
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>
}