react-pdf-builder
Version:
Build beautiful PDF documents in React.
43 lines (42 loc) • 2.45 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.QuickStart = void 0;
const renderer_1 = require("@react-pdf/renderer");
const react_1 = __importDefault(require("react"));
const Fonts_1 = require("../../fonts/Fonts");
const Themes_1 = require("../../themes/Themes");
const ThemedPage_1 = require("../basics/ThemedPage");
const Div_1 = require("../basics/Div");
const Button_1 = require("../button/Button");
const Box_1 = require("../layout/Box");
const PDFThemeProvider_1 = require("../theme/PDFThemeProvider");
const Heading3_1 = require("../typography/Heading3");
const Paragraph_1 = require("../typography/Paragraph");
/**
* Quick Start from the [README](https://justinmahar.github.io/react-pdf-builder/?path=/docs/home--docs#quick-start)
*/
const QuickStart = () => {
const roboto = Fonts_1.Fonts.load(Fonts_1.Fonts.sansSerif.roboto);
renderer_1.Font.register(roboto);
renderer_1.Font.registerEmojiSource(Fonts_1.Fonts.emojis.joyPixels());
const theme = Themes_1.Themes.default.build({
scale: 1,
override: {
classNames: { 'my-custom-class': { color: 'white', backgroundColor: 'darkblue', padding: 10 } },
},
});
return (react_1.default.createElement(renderer_1.PDFViewer, { style: { height: 700, width: 500 } },
react_1.default.createElement(renderer_1.Document, null,
react_1.default.createElement(PDFThemeProvider_1.PDFThemeProvider, { theme: theme },
react_1.default.createElement(ThemedPage_1.ThemedPage, { size: "A4", style: { fontFamily: roboto.family } },
react_1.default.createElement(Box_1.Box, { dir: "y", className: "gap-3" },
react_1.default.createElement(Heading3_1.Heading3, { rule: true }, "Hello, world!"),
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "Let's get started building the PDF."),
react_1.default.createElement(Box_1.Box, null,
react_1.default.createElement(Button_1.Button, { href: "#" }, "Button")),
react_1.default.createElement(Div_1.Div, { className: "my-custom-class w-50" }, "50% Div with a custom class. \uD83D\uDC4D")))))));
};
exports.QuickStart = QuickStart;