How to enable javascript external library in reactjs

Question

I would like to know how to incorporate an external javascript library into a response project. For example, I would like to import the jspdf library: https://github.com/MrRio/jsPDF/blob/master/jspdf.js and use it in my application.

So far I have been trying to use like this:

let React = require('react'); let { Spacing, Typography } = Styles; let DoughnutChart = require("react-chartjs").Doughnut; let Chart = require('react-google-charts').Chart; let { StylePropable, StyleResizable } = Mixins; let EditableDiv = require('../EditableDiv.jsx'); //some other library //the library that matter for me var pdfConverter = require('../utils/jspdf.source.js'); //then I have my classical react code which works and a function to generate ad pdf _generatePdf: function(){ console.log('Genrating pdf'); var doc = new pdfConverter.jsPDF('p','pt'); var img = new Image(); } 

I have the following error: TypeError: pdfConverter.jsPDF is not a function .

To make it work, I did something ugly, I copied the jspdf-source.js source to my response.jsx file and simply called jsPDF instead of pdfConverter.jsPDF. This is definitely not the right way, but cannot successfully import and use the library.

Can you tell me what I am doing wrong, and how can I fix it? thank you

-Edit -

When I used my ugly solution (copying the source to a file), I just needed to do the following:

 var doc = new jsPDF('p','pt); 

And it worked perfectly, expect I had a very large file

After the proposed solution from @dannyjolie below, I imported jspdf directly from the npm package, but I still cannot use the library. I tried the following error code:

 var pdfConverter = require('jspdf'); var converter = new pdfConverter(); var doc = converter.jsPDF('p', 'pt'); 

TypeError: pdfConverter is not a constructor Does this mean that I need to import jsPDF from a package, not just jspdf?

Then i try

 let pdfConverter = require('jspdf'); var converter = pdfConverter.jsPDF; var doc = new converter('p', 'pt'); 

ReferenceError: jsPDF not defined

TypeError: the converter is not a constructor

Well, obviously, I am not importing the right thing or the wrong one. What am I doing wrong?

Answer 1

First of all, do not use the source file. Just npm install jspdf --save , like any other package, and import it with var pdfConverter = require('jspdf');

Secondly, you are missing () in this line var doc = new pdfConverter.jsPDF('p','pt');

Do something like this:

 var converter = new pdfConverter(); var doc = converter.jsPDF('p', 'pt'); 

Answer 2

I know this is old, but I thought it would be helpful if someone posted a full working sample. It took me a while to figure this out using this other post as a starting point:

How to make PDF from React?

Assuming you are using the create-react-app, rewrite your App.js as follows ...

 import React, { Component } from 'react'; import pdfConverter from 'jspdf'; import logo from './logo.svg'; import './App.css'; class App extends Component { constructor(props) { super(props); this.onClick = this.onClick.bind(this); this.toDataUrl = this.toDataUrl.bind(this); } toDataUrl(url, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); } reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); } onClick() { var doc = new pdfConverter('p','pt','letter'); //console.log(doc.getFontList() ); this.toDataUrl('background.jpg', function(base64Img) { var imgData = base64Img; console.log(imgData); console.log('Adding to doc.'); doc.addImage(imgData, 'JPEG', 0, 0, 612, 792); console.log('Image added.'); doc.setFont('Times', 'Roman'); doc.setFontSize(22); doc.text(20, 50, 'Park Entry Ticket'); doc.setFontSize(16); doc.text(20, 80, 'Address1: ' ); doc.text(20, 100, 'Address2: ' ); doc.text(20, 120, 'Entry Date & time: '); doc.text(20, 140, 'Expiry date & time: ' ); console.log('About to save'); doc.save("test.pdf"); }); } render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. <input type='button' onClick={this.onClick} value="Print"/> </p> </div> ); } } export default App;