User story 1 log

Beginnings

Its 7:10am in the morning, I just woke up, no coffee and it is a saturday therefore no school, in fact we took an entire month off of school for no particular reason really except we were burnt out of studying 450 hours last semester and needed a decent break, hopefully the professors are not too angry about that. Anyways, I decided to work on what seems like the most challenging part of the project at first, parsing data into a pdf with React. This use case can be seperated into multiple parts i feel like

• The parsing of the data itself into pdf
• The pdf styling
• The pdf download or storage in the server

All of these can be handled with a library called React PDF It is basically a renderer so I’m not parsing anything into a pdf but actually rendering it in a pdf. The library provides a set of React primitives that will allow me to render things very quickly on the page and also allow us to style it using CSS so let’s give it a try.

Rendering a basic PDF document

First, we need to import react-pdf and TS support for it, we can do that using the following commands :

npm install @react-pdf/renderer --save
npm i events

Using yarn :

yarn add @react-pdf/renderer

For TypeScript support :

npm install --save @types/react-pdf

Creating a PDF

The library provides us a set of primitives to render the pdf on the fly, it also provides us a StyleSheet api that allows us to style the pdf document. It can be imported the following way :

import { Page, Text, View, Document, StyleSheet } from "@react-pdf/renderer";

I wont elaborate on how everything works as the library documentation is GREAT and has everything you ever need to know in relation to the library. Here is a small example taken from there for a better idea of how things work

import React from "react";
import { Page, Text, View, Document, StyleSheet } from "@react-pdf/renderer";

const styles = StyleSheet.create({
  page: { backgroundColor: "tomato" },
  section: { color: "white", textAlign: "center", margin: 30 },
});

const doc = (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
    </Page>
  </Document>
);

ReactPDF.render(doc);

The pdf documents rendering part is settled. but after further research and testing i have found the library to be lacking the flexibility to do what I really want