React Pages

React Pages is a library of pure functional react components that make it easy to create documents meant for print using web technology. It was built as a solution for encapulating the main challenges of using HTML for creating data driven PDF documents. Challenges like dynamic page wrapping, page numbering, table of contents pages, ect. are the primary focus.

Getting Started

Simple example

Every ReactPages document must have at it's root one or more <Document> components. It's direct children must be <Page> components. The <Document> component acts as a context provider for data about the document like the number of pages for example. Because of this ReactPages <Document> components are created using a factory function.

import React from 'react';
import ReactDOM from 'react-dom';
import { createDocument, Page } from 'react-pages';

const { Document } = createDocument();

// Some basic styles to make the pages centered and visually separated.
const pageStyle = { margin: '10px auto' };

const TwoPageDoc = () => (
  <Document>
    <Page style={pageStyle}>
      <h1>First Page</h1>
      <p>Here is some stuff for the first page.</p>
    </Page>
    <Page style={pageStyle}>
      <h1>Second Page</h1>
      <p>Here is some stuff for the second page.</p>
    </Page>
  </Document>
);

ReactDom.render(
  <TwoPageDoc />,
  document.body
);

API Documentation

To see the full ReactPages api documention visit the documentation site here: TODO: Build a documentation site and link to it here.

Contributing

Instalation

npm install

Running the dev server

The dev server will run the glossary layout example by default. To run one of the other examples open src/dev/index.js and change the exmple component being rendered to the one desired.

The open a command line, cd to the root and run:

npm start