How to Use a Globally Defined Script Inside a React Component

Jul 31, 2020 • 4 Minute Read

Introduction

React can be used to create all kinds of web apps. The flexibility of React allows a developer to embed it into an existing web app easily. But embedding React in acurrent system means there are other libraries or scripts in use apart from React.

React uses the Virtual DOM to manipulate the DOM nodes on the web page, and most other libraries might do direct DOM manipulation. So, in this guide, you will learn how to use globally defined or externally added scripts inside a React component.

Declaring A Global Variable

A global variable is defined inside a script tag independent of the React app. This global variable can be data that needs to be prerendered on the page for SEO purposes, or it could contain the user's information.

A global variable can be defined as follows.

          <script>
window.user = {
    id: 3,
    name: "John Doe",
}
</script>
    

Accessing a Global Variable

The window is the global object in the browser environment. Any property attached to the window object can be accessed from any script on the web page, including the script for the React app.

Since window is a global object, the React code can also access its properties, as shown below.

          import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      user: window.user,
    };
  }

  render() {
    const { user } = this.state;
    return (
      <div>
        <p> ID: {user.id} </p>
        <p> Name: {user.name} </p>
      </div>
    );
  }
}
    

You can also access the properties on the global object directly, without using the window object. But it will make the code difficult to debug as it won't be apparent where the user object is defined. Accessing any property via the window object makes it evident that it is defined and set globally.

Using External Scripts In a React Component

Now, there may be times when you need a library that does not have its own React component or might not work similarly to React—for example, jQuery.

jQuery is a popular JavaScript library, but it does not make use of the Virtual DOM; instead, it does direct DOM manipulation. So in this section, you will learn how to use jQuery in a React component.

Say you need to hide user info on a button click. To achieve this, you can use jQuery's hide() method. You usually pass a DOM selector to jQuery. But when using jQuery inside React, you need to give a ref.

A ref provides an interface to access DOM nodes that are defined in the render method of a React component. You can create a ref using the React.createRef() method. To get the actual DOM element, pass the ref to the findDOMNode() method of react-dom as you are going to manipulate the DOM node directly.

          import React from "react";
import { findDOMNode } from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: window.user,
    };
    this.domRef = React.createRef();
  }

  hideInfo = () => {
    const $ = window.$;
    const el = findDOMNode(this.domRef);
    $(el).hide();
  };

  render() {
    const { user } = this.state;
    return (
      <div>
        <button onClick={this.hideInfo}>Hide Info</button>
        <div ref={this.domRef}>
          <p> ID: {user.id} </p>
          <p> Name: {user.name} </p>
        </div>
      </div>
    );
  }
}
    

Conclusion

I don't advise using libraries that do direct DOM manipulation along with React. This may lead to bugs in code which may be quite challenging to track down, especially in an enterprise-level app. But sometimes you might want to use a particular library to meet specific requirements to complete your app. In such scenarios, use React refs to access the DOM node that gets mounted on the web page, and then, using the ref, you can call any method in the external library.