Skip to main content

Generic Components

To keep reports consistent, we have created a set of generic components that can be used across all reports. These components are used to provide a consistent look and feel across the application. Generic components can be found in the src/app/components/reports directory. In the following sections, we will discuss the various generic components used in the Record Books application.

The Footer component is used to display the footer of the report. It contains the OSU Extension Service logo and a disclaimer. The Footer component is defined in the src/app/components/reports/Footer.jsx file. The Footer component is positioned at the bottom of the report.

Usage examples​

import Footer from 'src/app/components/reports/Footer';
import { Page } from '@react-pdf/renderer';

<Page size="LETTER" style={ReportStyles.body} wrap>
    ...
    <Footer />
</Page>

OrderedList​

The OrderedList component is used to display a list of items in a report. The OrderedList component is defined in the src/app/components/reports/OrderedList.jsx file. The OrderedList component is used to provide a consistent look and feel across the application.

Props​

  • items (Array) - List of items to display
  • spaceAfter (Boolean) - (Optional) Add space after each item. Default is false.

Usage examples​

import { Page, Text, View } from "@react-pdf/renderer";
import OrderedList from "../OrderedList.jsx";

var indent = 20;

var bestResumelist = [
  <Text key="li1">List each year only once on each page at the first entry for that year.</Text>,
  <Text key="li2">Most items should only be entered once; however, some things may be listed in multiple places. For example, a speech you gave may be entered both in Section 11 if you gave it at your county contest AND in Section 9 as a Communication in 4-H. For major activities, you might emphasize different aspects of the activity in different sections. As an example, you might enter what you did and the hours you worked at a Community Service project in Section 7, but also enter it Section 5 under Leadership in 4-H if you were the person responsible for organizing the event.</Text>,
  <Text key="li3">Be as specific and complete with your entries as possible. You want people who read your record to understand the extent of what you have done.</Text>,
  <Text key="li4">Be careful in your use of abbreviations and/or acronyms. Someone reading your record might not be familiar with those you use, and some have multiple meanings.</Text>,
  <Text key="li5">{"Remember that quality is more important than quantity. Don't put things in your record just to fill up space."}</Text>
]
<Page size="LETTER" style={ReportStyles.body}>
    ...
    <View style={{marginLeft: indent}}>
        <OrderedList items={bestResumelist} spaceAfter={true}/>
    </View>
</Page>

ReportStyles​

The ReportStyles component is used to define general styles for reports. The ReportStyles component is defined in the src/app/components/reports/ReportStyles.jsx file. The ReportStyles component is used to provide a consistent look and feel across the application.

Due the the large number of different reports, individual component styles should not be defined in the ReportStyles component. Instead, individual styles should be defined where the component is defined.

Usage examples​

import { Page, Text, View } from "@react-pdf/renderer";
import ReportStyles from "../ReportStyles.jsx";

<Page size="LETTER" style={ReportStyles.body}>
    <Text style={ReportStyles.title}>4-H Record Book</Text>
    ...
</Page>