How to add external javascript file with reactjs - javascript

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

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

Related

Can shift a component's function in some other file in vue?

I have multiple functions in my vue component like this. Is there any way i can shift functions in some other file and then import those here . This is my App.vue
getLocation: async function () {
},
subscribe: function (longitude, latitude) {
},
async openLocationWarning() {
},
uploadData(data, key) {
},
downloadData()
{
}
No you cant but you can use mixins. You can also store it in a js file and export it.
export yourFunction() {
}
export anotherFunction(){
}
And import it in your file
import {yourFunction, anotherFunction} from 'path/to/your_file';
methods: {
callSomeFunction() {
// you can call it like this.
yourFunction();
}
}

Run a Script in React JS/TSX file

I have a ReactJs file, Component.js and I want to execute a Script which looks like this:
<script type='text/javascript'>
window.onAmazonLoginReady = function() {
amazon.Login.setClientId('CLIENT-ID');
};
window.onAmazonPaymentsReady = function() {
//Will also add this button implementation method
showButton();
};
</script>
I want to include this Script in Component.js file, but couldn't think of any way. I had included this in index.js/index.html but I want the above script to be executed when the Component.js file loads.
This is my component.js file:
import React, { useContext, Component } from 'react';
import { Link } from 'react-router-dom';
const Component = () => {
return (
<div> Hello from Component </div>
);
};
export default Component;
You can just add the script inside the useEffect of the Component.js file like this :
useEffect(() => {
const setLoginClientId = () => {
amazon.Login.setClientId('CLIENT-ID');
};
// If this "onAmazonLoginReady" is a javascript event then you should add like this
// window.addEventListener("onAmazonLoginReady",setLoginClientId);
window.onAmazonLoginReady = setLoginClientId;
// Removed the unncessary function inside function,
// you can directly call showButton now
window.onAmazonPaymentsReady = showButton;
//Calling Set Client Id once, if you want
setLoginClientId();
},[]);
This will only run one time just after the Component loads.

Problem with calling javascript from angular typescript

I am trying to call javascript function from the typescript function.
This is not working at all.
I have created sudo code in stackblitz. Please check the same.
https://stackblitz.com/edit/angular-nullyo
You can export it at one place, import it at another.
hello.js
export function hello() {
console.log('hello world');
}
app.component.ts
import { hello } from '../external/hello.js';
#Component({
// ...
})
export class AppComponent {
buttonClick() {
console.log('btn click called. 1.');
hello();
console.log('btn click called. 2.');
}
}
DEMO

Adyen's Checkout SDK integration in react app

I have a react app and I want to set up adyen (payment processing API) in that. I want to use the checkout SDK (https://docs.adyen.com/developers/checkout/web-sdk )as its very simple,
I have moved the js logic to componentDidMount, but having problem loading the sdk,
<script type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.6.3.min.js"></script>
So I can use the below function from SDK:
chckt.hooks.beforeComplete = function(node, paymentData) {
return false; // Indicates that you want to replace the default handling.
};
I have tried using react-script-tag, in my React component:
render() {
return (
<div className='checkout-warpper'>
<ScriptTag type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.9.2.min.js" />
<div className="checkout" id="adyen-checkout">
{/* The checkout interface will be rendered here */}
</div>
</div>
);
}
but still get the error:
Uncaught ReferenceError: chckt is not defined.
Try window.chckt.hooks.beforeComplete = ... chckt is a global scope variable.
The easiest way to load external script is by using react-async-script-loader
import React from 'react';
import scriptLoader from 'react-async-script-loader'
class CheckoutSDK extends React.Component {
componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
if (isScriptLoadSucceed) {
window.chckt.hooks.beforeComplete = function(node, paymentData) {
return false; // Indicates that you want to replace the default handling.
};
}
}
}
render() {
return null
}
}
export default scriptLoader('https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.6.3.min.js',)(CheckoutSDK)
you can try using import ScriptLoader from 'react-script-loader-hoc'; and you can find on window.chckt.

close bootstrap modal in react-redux programmatically using jquery

trust we all doing great...I am currently building a react application also making use of redux, I am having an issue trying to close modal in bootstarp programmatically, I am using bootstrap 4, and jquery 3.3.1... I have tried this:
onSubmit(event) {
event.preventDefault();
this.props.editBusinessAction(this.props.id, this.state)
.then((message) => {
$('#modal').modal(hide)
toastrOption();
toastr.success(message);
})
.catch((message) => {
toastrOption();
toastr.error(message);
console.log(message);
});
}
Try putting hide in quotes like this:
onSubmit(event) {
event.preventDefault();
this.props.editBusinessAction(this.props.id, this.state)
.then((message) => {
$('#modal').modal('hide')
toastrOption();
toastr.success(message);
})
.catch((message) => {
toastrOption();
toastr.error(message);
console.log(message);
});
}
$('#modal').modal('hide') this works only when you import jquery and bootstrap in your entry component.
install jquery and bootstrap and import jquery in your starting component eg: App.js like below
npm install -s jquery#2.2.3 bootstrap#3.3.6
App.js
import 'jquery';
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
export default class extends Component {
render(){
return (
<div>App component</App>
)
}
}

Categories

Resources