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
– Felix Kling

2017-04-30 02:05:23 +00:00
Commented Apr 30, 2017 at 2:05 — Felix Kling
– Felix Kling, Commented Apr 30, 2017 at 2:05
@FelixKling let me give a try

Anish
– Anish

2017-04-30 02:07:58 +00:00
Commented Apr 30, 2017 at 2:07 — Anish
– Anish, Commented Apr 30, 2017 at 2:07
@FelixKling its not working

Anish
– Anish

2017-04-30 02:30:42 +00:00
Commented Apr 30, 2017 at 2:30 — Anish
– Anish, Commented Apr 30, 2017 at 2:30

bntzio · Accepted Answer · 2017-04-30 05:31:39Z

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.

Alireza · Accepted Answer · 2017-04-30 02:02:17Z

3

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

answered Apr 30, 2017 at 2:02

Alireza

105k27 gold badges280 silver badges173 bronze badges

2 Comments

Anish Over a year ago

Actually script.js large file for quick understanding i wrote only one function so in this case how to solve it??

Alireza Over a year ago

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

JuMoGar · Accepted Answer · 2017-04-30 02:13:07Z

0

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();
}
}

answered Apr 30, 2017 at 2:13

JuMoGar

1,7603 gold badges23 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to add external javascript file with reactjs

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related