Named, nesting contexts (or flows) for fixed components

[mdarens]

Per the docs on control of page wrapping, we can use the fixed prop to make running components appear on every page of a document for things such as page numbers.

But what if we have something we don't want to show the same on every page, Such as running headers for chapters or glossary headers? Or something we don't want outside the bounds of a container nested in the document, like running header & footer rows for long tables which run over multiple pages?

I think a declarative solution for all of these which would make for a minimal expansion of the API is named flows for establishing contexts for fixed components.

In practice could look something like this:

<Page>
  <View style={{ marginTop: 72 }}>
    <Text fixed>Global fixed</Text>
    <View flow="myFlow">
      <Text fixed="myFlow">Fixed but only inside the myFlow View</Text>
      <Text fixed style={{ position: "absolute", bottom: 12 }}>
        Another global fixed
      </Text>
    </View>
  </View>
</Page>

Alternate API to additionally allow flowing non-fixed/repeating components into containers:

// a little more portal-like
<Page>
  <View style={{ marginTop: 72 }}>
    <Text fixed>Global fixed</Text>
    <Flow name="myFlow">
      <Text fixed flow="myFlow">Fixed but only inside myFlow</Text>
      <Text flow="myFlow">Flows into myFlow but isn't fixed</Text>
      <Text fixed style={{ position: "absolute", bottom: 12 }}>
        Another global fixed
      </Text>
    </Flow>
  </View>
</Page>

Let me know if you think this is a good idea, and thanks for your time!

[reinvanimschoot]

We would be very interested in this idea. The lack of running headers for chapters is one of the reasons we cannot use react-pdf right now since we are trying to bring our content as close to a printed version as possible.

[mdarens]

The workaround I would use for this now is to instantiate new Page elements while iterating through chapters, and use the data bout the chapter in scope combined with the page render props to do running headers, since new chapters presumably always start on a new page. This still wouldn't give us things like glossary headers though.

[mdarens]

So something like:

const Book = () => {
  <Document>
    {chapters.map(chapter => (
      <Page>
        <View
          render={({ pageNumber }) => (
            <Text
              style={{
                position: "absolute",
                top: 36,
                right: pageNumber % 2 ? 36 : undefined,
                left: pageNumber % 2 ? undefined : 36
              }}
            >
              {chapter.title}
            </Text>
          )}
        />
        {/* content */}
      </Page>
    ))}
  </Document>;
};