How to add external javascript file with reactjs

Question

I have an external JS file script.js

(function($) {
// Mega Menu
    $('.toggle-icon').on('click', function() {
      if ($(this).hasClass("active")) {
        $(this).removeClass('active');
        $(this).next().slideUp();
    } else {
        $(this).find('.toggle-icon').removeClass('active');
        $(this).find('ul').slideUp();
        $(this).addClass('active').next().slideDown();
    }
});

   // End Mega Menu
    });

i want to add this file in my React-Redux App

Can anyone please help me to solve this mystery

Just include it in the HTML page like any other script? – Felix Kling Apr 30 '17 at 02:05 — Felix Kling, Apr 30 '17 at 02:05

score 11 · Accepted Answer · answered Apr 30 '17 at 05:31

Export your js code and then import it in your react component.

export function toggleIcon() {
  $('.toggle-icon').on('click', function() {
    if ($(this).hasClass("active")) {
      $(this).removeClass('active');
      $(this).next().slideUp();
    } else {
      $(this).find('.toggle-icon').removeClass('active');
      $(this).find('ul').slideUp();
      $(this).addClass('active').next().slideDown();
    }
  });
}

Then you can import it in your react component.

// custom is the path to the file that holds your js code
import { toggleIcon } from './custom';

Then call it in your react component, for example in a react lifecycle method like componentDidMount.

componentDidMount() {
  toggleIcon();
}

Another (faster) way is by using require in your react component to load in the js code.

require('./custom');

That way you load the js code immediately, and you don't need to make an exportable version of your function, it just requires the file.

score 3 · Answer 2 · answered Apr 30 '17 at 02:02

You need export your file and then import it in your React-app, it's recommended to include these kinds of logics in your React app, but if you really needed, export your function and import in the React Component which you need it, you can name you function as well, something like the below code:

export function toggleIcon () {
     $('.toggle-icon').on('click', function() {
      if ($(this).hasClass("active")) {
        $(this).removeClass('active');
        $(this).next().slideUp();
    } else {
        $(this).find('.toggle-icon').removeClass('active');
        $(this).find('ul').slideUp();
        $(this).addClass('active').next().slideDown();
    }
}

and import it:

import {toggleIcon} from 'custom';

toggleIcon(); // call your external function like this

Actually script.js large file for quick understanding i wrote only one function so in this case how to solve it?? — Anish, Apr 30 '17 at 02:04
Yes, you can export the whole thing, you can assign it to var or const to export it as well, if you do it as IFEE, just import it to where you like and it should be working — Alireza, Apr 30 '17 at 02:07

score 0 · Answer 3 · answered Apr 30 '17 at 02:13

Try to put ToogleIcon instead of toogleIcon in the component where you want instance it.

import {ToggleIcon} from 'custom';

ToggleIcon(); // call your external function like this

and export defaultinstead of export

export default function toggleIcon () {
 $('.toggle-icon').on('click', function() {
  if ($(this).hasClass("active")) {
    $(this).removeClass('active');
    $(this).next().slideUp();
} else {
    $(this).find('.toggle-icon').removeClass('active');
    $(this).find('ul').slideUp();
    $(this).addClass('active').next().slideDown();
}
}

How to add external javascript file with reactjs

3 Answers3

Linked