Using Polyfill with React not taking into account named pages
I have a React based application that uses PagedJS to create a book version of a blob of data.
Currently, the implementatin looks like this (Book.tsx
):
import '../styles/print.pcss';
import {} from 'pagedjs/dist/paged.polyfill';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import Cover from './Cover';
import Part from './Part';
import TableOfContents from './TableOfContents';
import { theme } from './theme';
type Props = {
book: any;
};
export default function Book(props: Props) {
const { book } = props;
const { children, ...metadata } = book;
const partNodes = children.filter(({ type }) => type === 'part');
return (
<ThemeProvider theme={theme}>
<Cover metadata={metadata} />
<TableOfContents partNodes={partNodes} />
{renderParts()}
</ThemeProvider>
);
function renderParts() {
return partNodes.map((part, index) => {
return <Part key={index} part={part} />;
});
}
}
In general, this setup works, as in it uses the @page
directives found in print.pcss
:
@page {
size: A4 portrait;
background-color: white;
}
However, from the moment I try to introduce named pages, none of the named page styles have any effect.
@page coverPage {
margin-left: 3in;
background: green;
}
@page {
size: A4 portrait;
background-color: red;
}
.coverPage {
page: coverPage;
}
export default function Cover(props: Props) {
const { metadata } = props;
return (
<div className="coverPage">
<CoverData>
<Title>{metadata.title}</Title>
<Url>{metadata.shortUrl}</Url>
</CoverData>
</div>
);
}
For example, this does not work.
I'm not sure if this has anything to do with React or not, or whether the polyfill can't detect named pages?
I tried using the previewer in a useLayoutEffect
, which does work but then I get two versions of the book,
one rendered in React without pagedjs styles and one with.
useLayoutEffect(() => {
const previewer = new Previewer();
previewer.preview(document.querySelector('#app').innerHTML);
}, []);
Like so. I also tried previewer.preview(document.querySelector('#app').innerHTML, [], document.body);
but to no avail.
The fact that the previewer does work seems to indicate that it might have something to do with the polyfill rendering too fast? In any case, I'm out of ideas and I could really use some help!
Kind regards Rein