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
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With