Using React with Third-Party JavaScript Libraries

Here we want to present you the steps to take if you want to integrate a pure JavaScript library into a native React application. We follow the guidelines set in the official React tutorial ‘Integrating with Other Libraries’ (https://reactjs.org/docs/integrating-with-other-libraries.html). This tutorial uses the RealTimeChart sample (https://mindfusion.eu/samples/javascript/chart/RealTimeStockChart/RealTimeStockChart.html) that MindFusion has developed for JavaScript and creates, from scratch, the same chart in React. We use again the JavaScript library for Charts and Gauges by MindFusion (https://mindfusion.eu/javascript-chart.html).

The steps described bellow are universal and you can follow them if you want to integrate any JS library into your React component.

I. Create a React Project

We create an empty React project using the create-react-app npm library, which is available at https://www.npmjs.com/package/create-react-app. If you are new to this tool, their official documentation is available at https://create-react-app.dev/docs/getting-started/.

npx create-react-app realtimechart
cd realtimechart
npm start

We create a project called realtimechart and we go into its directory. The start command opens the application, which is an empty, native React application.

We install the JavaScript chart module from npm (https://www.npmjs.com/package/chart-library)

npm i chart-library

This is all we need to install. We require jQuery but it is automatically installed by create-react-app, so we are ready installing modules and we start writing the real time chart.

II. Referencing the Chart Module

We create an empty JavaScript file that we place in the ‘src’ folder of our project. There we import the React library:

import React, { Component } from ‘react’;

The question is how do we import the Charting library that is located in the ‘chart-library’ subfolder in the node-modules folder? We import it this way:

import * as Charting from ‘chart-library’;

If there are additional modules, like the ones required by the charting library, you import them this way:

import MindFusion from ‘mindfusion-common’

Here we import all classes from MindFusion auxiliary common npm package (https://www.npmjs.com/package/mindfusion-common) as MindFusion.

III. The Chart

Now we create a RealTimeChart React component in the empty RealTimeChart.js file:

export class RealTimeChart extends Component {
}

First we will implement the render method. It returns the HTML elements that we want our component to have. In this case we need to add just a Canvas. MindFusion JavaScript chart requires a Canvas instance to render itself onto:

render() {
 return (
   <div>
       <canvas width=”1000px” height=”800px” ref={this.el}></canvas>
   </div>
  );
 }

Note that we add a ref attribute to the canvas element. This is the name through which we will be able to refer to the canvas element in the rest of the React code. The canvas is initialized in render() but we must be able to access it in other methods as well. So we will access it through ‘this.el’.

We add the constructor now. In it we create a reference to the chart canvas using the createRef method of React and keep a variable called chart in the component state. Initially the value of this state is null:

constructor(props) {
   super(props);
   this.el = React.createRef();
  this.state = {
    chart: null
   }
 }

Then we add the componentDidMount method, which is where we must do the chart initialization and customization. This method is the place where we get a reference to the this.el instance and we can use it to create the JS chart object:

componentDidMount() {
 var stockChart = new Charting.MindFusion.Charting.Controls.CandlestickChart(this.el.current);
 
 stockChart.title = “The Big Corporation”;
 stockChart.theme.titleFontSize = 16;
 stockChart.candlestickWidth = 12;
 stockChart.showLegend = false;
…………………
 …………………
 …………………
}

In componentDidMount we also assign the newly created chart instance to the state object. This allows us to get a reference to the JavaScript chart object anywhere else in the code:

this.setState({ chart: stockChart, data: dataList, intervalId: intervalId });

Here we keep three variables in the React component state: the stock chart, a list with the chart data and an intervalId timer instance. We need the timer because we want our chart to be updated at regular intervals. In our case — 1 minute or 6000 milliseconds.

Here is how we create the timer:

var intervalId = setInterval(this.updateStock.bind(this), 60000);

So, componentDidMount is the place where you get reference to the DOM elements that were created in render(). This is the place where you can place important data in the component’s state, which you will access in other methods. Here you also call other methods, that are needed to build the component. We have one, and this is the method that parses the chart data. It is called updateStock and we call it at the end of componentDidMount:

this.updateStock();

Note that all methods, that are added to our React component are called using ‘this’.

IV. Clear Data

Finally, we use the componentWillUnmount method to clear the interval that was used to update the chart:

componentWillUnmount() {
 clearInterval(this.state.intervalId);
 }

This is the place where you clear all event listeners and other data, object instances, like the timer, that you create in componentDidMount.

And this is the idea in brief. You’ve learnt the backbone of how to integrate a 3rd part library written in pure JavaScript into a native React application. The sample project is available for download from:

http://mindfusion.eu/samples/javascript/chart/realtimechart-react.zip

About MindFusion JavaScript Gauges: A set of two gauge controls: oval and rectangular, with the option to add unlimited nuber of scales and gauges. All gauge elements support complete customization of their appearance. Custom drawing is also possible, where you can replace the default rendering of the gauge element or add to it. The gauge controls include a variety of samples that offer beautiful implementations of the most popular applications of gauges: thermometer, car dashboard, functions, compass, clock, cost meter and more.
Gauges for JavaScript is part of MindFusion charts and Dashboards for JavaScript. Details at https://mindfusion.eu/javascript-chart.html.