cft
Become a CreatorSign inGet Started

React — Integrating with Third-Party Libraries

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


user

Bewar Salah

4 months ago | 3 min read
Follow

react-integrating-third-party-libraries-deabe

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

componentWillUnmount() {

}

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.

shouldComponentUpdate() {

return false;

}

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.

npx create-react-app react-integrations

cd react-integrations

npm start

We will remove the application from unwanted files that comes with the boilerplate like index.cssapp.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

npm i -S jquery datatables.net

  • Add a link to DataTable.css file in index.html.

<link rel=”stylesheet” href=”

" />

  • Create a class component named DataTable inside components/DataTable.js.
  • Import the libraries:

var $ = require(“jquery”);

$.DataTable = require(“datatables.net”);

  • 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().

componentDidMount() {

this.$el = $(this.el);

this.currentTable = this.$el.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.

componentDidUpdate(prevProps) {

// It means that only when props are updated

if (prevProps.children !== this.props.children) {

this.currentTable.ajax.reload();

}

}

  • Finally, inside componentWillUnmount() we destroy the table.

componentWillUnmount() {

this.currentTable.destroy();

}

  • 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.

Upvote


user
Created by

Bewar Salah

Follow

Software Developer


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles