React-pdf: Third party plugins

[simonbengtsson]

Interesting project for sure! Are there any plans on supporting third party plugins? I have previously created a table plugin for jspdf jspdf-autotable and was wondering if this is something that will be possible in react-pdf.

Oh and btw, any plans on supporting tables natively?

[jbovenschen]

Thank you!

Cool project jspdf-autotable.

This is an idea we played around with, but won't be available until the 1.0 version of react-pdf is released. Also this would mean that we should make some changes to pdfkit which we use internally for the 1.0 release.

The main focus for now is to just support the primitives which are available in other react renderers like react-native and react-sketchapp. This would mean that there won't be native tables at this moment. But hopefully we can fix that in the future.

[simonbengtsson]

Fair enough! Sounds like reasonable prioritization. Big fan of your effort to decaffeinate pdfkit btw 🎉 Let me know if you want any assistance there.

[fufjvnvnf]

Agreed. I love this project. Would customized components be supported in the future? I am looking for a way to export airbnb superset's dashboards to pdf!

[jbovenschen]

@fufjvnvnf would be really cool to see this project being used at the airbnb superset dashboards.

What do you mean with customized components. Text, View and SVG's will be supported within our initial release. What kind of other features do you think you will need to make full advantage of the PDF rendering.

Extensions will mean that you can make things like Video, Security (Passwords) and other things supported in the pdf spec within react-pdf.

[fufjvnvnf]

@jbovenschen I'm a complete noob on front-end so I might've said something stupid. I was wondering if custom classes that extend React.component would be supported, i.e. if I create a pdf using your library that contains such components, will them be correctly displayed? Thank you!

[jbovenschen]

@fufjvnvnf Sure it will be supported it's just a renderer target for how react works, so you can do anything what you're used to do within your react components.

Also we make full advantage of yoga (also used in react-native and react-sketchapp in the future), so you can style your components as follows;

import React from 'react';
import { StyleSheet, Text } from '@react-pdf/core';

const styles = Stylesheet.create({
  paragraph: { 
    color: 'grey',
    fontSize: 16,
  }
});

class Paragraph extends React.Component {
  render() {
    const { children } = this.props;

    return (
      <Text style={styles.Paragraph}>
        {children}
      </Text>
    );
  }
}

Hope this answers your question?

[fufjvnvnf]

@jbovenschen Hah I see! Then this is exactly what I'm looking for! Thank you very much and I will try it on my project now!

[jbovenschen]

@fufjvnvnf Like mentioned in the readme, it is stated that this project is not ready for production usage, but I'm happy that you want to try it already. The last changes within the layout calculations are not published yet. If you hit any constraints let us know.

[fufjvnvnf]

I notice this package uses yarn for install. My project however uses npm. After I installed your package, whenever I install other packages using npm, npm automatically deletes the content of your package. How should I resolve the incompatibility between the two package managers? Or do I have to migrate to yarn in order to use your package? I am also not able to run my project using your package because it keeps saying that module "fs" couldn't be found, but I've installed it using both npm and yarn. The fs directory downloaed is empty, and according to the README it's "not currently in use" anymore.

[jbovenschen]

I guess you want to run the package directly in the browser with the @react-pdf/dom package.
This is not really good supported at this moment, because of the way pdfkit is bundled.
This is something I currently work on to support with changes in pdfkit, this is for now not really viable.