How to add external javascript file with reactjs

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

Answers:

Answer

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.

Answer

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
Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.