React — Integrating with Third-Party Libraries

Summary

In this post, I will try to explain React — Integration with third-party libraries.

Introduction

React.js open-source javascript library for building front-end applications. According to [StackOverflow 2020 survey], it is the second most popular web framework after JQuery and the most wanted web framework in the industry.

There are many libraries that are written in plain Javascript or as a JQuery plugin, an example is Datatable.js. There is no need to reinvent the wheel, consume a lot of time and energy, and re-create those libraries.

When I started working on React.js last year, I faced a big problem. Integrating React.js with other libraries is not easy and straight-forward. Also, it is not very difficult to integrate with other libraries.

React.js has good documentation but it has only one example. It teaches how to integrate with the JQuery Chosen library. I found out that not all libraries can be integrated using the same technique as documented. There are some other techniques, developers need to know and use to integrate with some other libraries.

Class Components

Third-party libraries can be integrated with class components, also with functional components using Hooks. According to [Dan Abramov], they (React Team in Facebook) have no plans to remove ES6 class syntax support in the future. I have poor information about Hooks, that is why I am using class components in the examples.

A React.js component may update the DOM elements multiple times during its lifecycle after component props or states update. Some libraries need to know when the DOM is updated. Some other libraries need to prevent DOM elements from updating.

Usually, component state variables change when a normal user interacts with the component such as pressing a button. This can be achieved using this.setState function. Props are used to pass data from the parent component down to the child component.

Sometimes, we need to fetch data from the server and the data is read after the component is mounted on (written to) the DOM. Accordingly, the component updates the DOM when the data is finished fetching from the server either updating States or Props.

A class component is an ES6 class that extends React’s Component.

Refs

React provides a way for developers to access DOM elements or other React elements. Refs are very handy when integrating with third-party libraries.

React Lifecycle Methods

We need to know some lifecycle methods. These lifecycle methods are important for initializing other libraries, destroying components, subscribing and unsubscribing events

1- componentDidMount: it is fired when the element is mounted on the DOM. It is like jquery’s $(document).ready().

Usage:

  • fetching data from the server.
  • initializing third-party libraries.

3- componentDidUpdate: it is fired when the props passed to the component are updated or the method `this.setState` is called to change the state of the component. This method is not called for the initial `render()`.
Usage:

  • reload third-party library if props is updated.

3- componentWillUnmount: it is fired before the React component is destroyed and unmounted on the DOM.

Usage:

  • Unsubscribing from events
  • Destroying third-party library

4- shouldComponentUpdate: it is used to avoid the React component from re-rendering. It prevents updating the DOM even if the state or props are updated.
Usage:

  • Some libraries require an un-changeable DOM.

Setup

We use create-react-app boilerplate to set up a React.js project using. The bellow will create the React.js app and then start it.

We will remove the application from unwanted files that comes with the boilerplate like index.css, app.css, and logo.js.

Datatables — Integrations

Datatables.js is a free JQuery plugin that adds advanced controls to HTML tables like searching, sorting, and pagination.

  • Need to install a couple of dependencies from npm: jquery and datatables.net
  • Add a link to DataTable.css file in index.html.
  • Create a class component named DataTable inside components/DataTable.js.
  • Import the libraries:
  • Inside the render() method, we need to have a table element with a ref. It looks like an Html’s ID, we use it for selecting (referencing) it.
  • We need to render children props inisde the tbody which is passed by the parent element.
  • Inside the componentDidMount() method, we need to get the ref and call jQuery method DataTable().
  • Inside the componentDidUpdate (prevProps), we refresh the Datatable by calling ajax.reload() when the props are updated. According to datatable.js, this method refreshes the table.
  • Finally, inside componentWillUnmount() we destroy the table.
  • Using the DataTable component in our react application.

Conclusion

We have learned how to use a third-party library like DataTable.js inside React.js. Please check the repository for the complete example. I have plans to post more examples in the future like select2. Please comment below and mention the name of the libraries if you like me to post about them.

Software Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store