danomatic
Having problems with custom renderers
I'm trying to use custom renderers in my application to support sub and sup tags, and they're not having an effect.
I have defined the renderers to use, pulling in the renderInline function from react-pdf-html so I don't have to write my own copy:
const htmlExtraRenderers = {
'sup': renderInline,
'sub': renderInline,
}
And then I have specified the renderers when creating the Html component:
<Html style={styles.text} stylesheet={htmlStyles} renderers={htmlExtraRenderers}>
{value}
</Html>
Yet in the console log, I am still seeing render.js:130 Excluding "sup" because it has no renderer and no text shows up in the outputted PDF.
Is there a good example of using custom renderers available to look at?
I just added a unit test that verifies that the custom renderer is used when passed in: https://github.com/danomatic/react-pdf-html/blob/main/src/renderer.test.tsx
I also merged in your PR and released it as v1.1.7.
Through looking at this I'm noticing a bug. If you provide a custom renderer then the library won't know if it's block or inline. This impacts the rendering tree. Inline elements are wrapped with a Text component, and block elements are wrapped with a View component. I'll have to think more about how to handle this.
OK. The PR will at least solve my current issue (not being able to render sub/sup) and I can skip the custom renderer for now. Thanks!
@toddpalino Did you manage to style the sub/sup properly? I'm able to change their fontSize, but I can't actually make them superscript/subscript. I've tried using transform/margin/top/bottom/verticalAlign, but these styles aren't being applied - they only seem to work on block elements.
@paule89123 that's probably true. Perhaps you could create an example with react-pdf/renderer that does what you need and we can try to port it to HTML
@toddpalino how did you write custom renderer for sub/sup? I was worried it couldn't be done because react-pdf Text elements don't have layout for margin or padding