Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@react-pdf/render
Advanced tools
@react-pdf/render is a library for creating PDF documents using React components. It allows developers to use React's declarative syntax to design and generate PDF files programmatically.
Basic PDF Document Creation
This code demonstrates how to create a basic PDF document with two sections using @react-pdf/render. It uses React components to define the structure and style of the PDF.
const { Document, Page, Text, View, StyleSheet } = require('@react-pdf/render');
const styles = StyleSheet.create({
page: { flexDirection: 'row', backgroundColor: '#E4E4E4' },
section: { margin: 10, padding: 10, flexGrow: 1 }
});
const MyDocument = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
module.exports = MyDocument;
Styling PDF Components
This code sample shows how to apply styles to PDF components using the StyleSheet object from @react-pdf/render. It demonstrates setting background colors, borders, and text styles.
const { Document, Page, Text, View, StyleSheet } = require('@react-pdf/render');
const styles = StyleSheet.create({
page: { flexDirection: 'row', backgroundColor: '#E4E4E4' },
section: { margin: 10, padding: 10, flexGrow: 1, backgroundColor: '#ffffff', border: '1px solid #000' },
text: { fontSize: 12, color: '#000' }
});
const MyStyledDocument = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text style={styles.text}>Styled Section #1</Text>
</View>
<View style={styles.section}>
<Text style={styles.text}>Styled Section #2</Text>
</View>
</Page>
</Document>
);
module.exports = MyStyledDocument;
Embedding Images
This example demonstrates how to embed images in a PDF document using @react-pdf/render. The Image component is used to include an image from a URL.
const { Document, Page, Text, View, Image, StyleSheet } = require('@react-pdf/render');
const styles = StyleSheet.create({
page: { flexDirection: 'row', backgroundColor: '#E4E4E4' },
section: { margin: 10, padding: 10, flexGrow: 1 },
image: { width: 100, height: 100 }
});
const MyDocumentWithImage = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section with Image</Text>
<Image style={styles.image} src="https://example.com/image.png" />
</View>
</Page>
</Document>
);
module.exports = MyDocumentWithImage;
PDFKit is a JavaScript library for generating PDF documents, written in Node.js. It provides a lower-level API compared to @react-pdf/render, which allows for more control but requires more code to achieve similar results.
jsPDF is a popular library for generating PDF documents in JavaScript. It is more lightweight and has a simpler API compared to @react-pdf/render, but it lacks the declarative syntax and React component-based approach.
pdfmake is a library for creating PDF documents in JavaScript. It uses a declarative approach similar to @react-pdf/render but does not integrate with React. It is suitable for generating PDFs in both client and server environments.
React-pdf render engine
yarn add @react-pdf/render
const render = require('@react-pdf/render');
const primitives = require('@react-pdf/primitives');
const view = {
type: primitives.View,
style: {
backgroundColor: 'red',
borderTopLeftRadius: 5,
borderTopRightRadius: 10,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 15,
borderTopColor: 'yellow',
borderLeftColor: 'green',
borderBottomColor: 'black',
borderRightColor: 'purple',
},
box: {
left: 20,
top: 20,
width: 100,
height: 80,
borderTopWidth: 3,
borderLeftWidth: 2,
borderBottomWidth: 1,
borderRightWidth: 4,
},
};
const doc = {
type: primitives.Document,
children: [
{
type: primitives.Page,
box: { width: 400, height: 600 },
children: [view],
},
],
};
// Provide your own context
const ctx = createContext();
render.default(ctx, doc);
This library exports a render
function that takes two arguments:
type
and arguments.A node represents a single element inside a document. It's mainly defined by it's type
(mandatory) field in addition to other values to define where that element is positioned inside the document (box
), how it looks (style
), how it should behave (params
) and what sub-nodes it contains (children
).
The root node must always be of type DOCUMENT
, containing as many PAGE
nodes as desired inside it's children field.
Bare in mind this package does not handle any type of node positioning, inheritance, style transformations or any other layout related logic. It's role is limited to render exactly the node it get's into the provided context. Take this into account when definig styles as paddingTop
, paddingLeft
and so on instead of the shortcut padding
. For layout or styles transformation this project provides separate packages.
Mandatory field specifiying the type of the particular node. The full list of types can be found and imported from @react-pdf/primitives
Defines bounding box where a particular node is located inside a document
Defines how the node looks like. There are some types of nodes that expect special style values, but generally all support:
Specific node params needed to render correctly ot behave like certain way. Specially needed for SVG nodes
const fs = require('fs');
const render = require('@react-pdf/render');
const pdfkit = require('@react-pdf/pdfkit');
const PDFDocument = pdfkit.default;
const ctx = new PDFDocument({ autoFirstPage: false });
const doc = {}; // See above
render.default(ctx, doc);
const stream = fs.createWriteStream('./test.pdf');
ctx.pipe(stream);
MIT © Diego Muracciole
FAQs
A render engine for Node and the browser
The npm package @react-pdf/render receives a total of 495,602 weekly downloads. As such, @react-pdf/render popularity was classified as popular.
We found that @react-pdf/render demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.