I have a relatively straightforward issue of trying to add inline scripting to a React component. What I have so far:
'use strict';
import '../../styles/pages/people.scss';
import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';
import { prefix } from '../../core/util';
export default class extends Component {
render() {
return (
<DocumentTitle title="People">
<article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
<h1 className="tk-brandon-grotesque">People</h1>
<script src="https://use.typekit.net/foobar.js"></script>
<script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
</article>
</DocumentTitle>
);
}
};
I have also tried:
<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
Neither approach seems to execute the desired script. I'm guessing it's a simple thing I'm missing. Can anybody help out?
PS: Ignore the foobar, I have a real id actually in use that I didn't feel like sharing.
Edit: Things change fast and this is outdated - see update
Do you want to fetch and execute the script again and again, every time this component is rendered, or just once when this component is mounted into the DOM?
Perhaps try something like this:
componentDidMount () {
const script = document.createElement("script");
script.src = "https://use.typekit.net/foobar.js";
script.async = true;
document.body.appendChild(script);
}
However, this is only really helpful if the script you want to load isn't available as a module/package. First, I would always:
Look for the package on npm
Download and install the package in my project (npm install typekit)
import the package where I need it (import Typekit from 'typekit';)
This is likely how you installed the packages react and react-document-title from your example, and there is a Typekit package available on npm.
Update:
Now that we have hooks, a better approach might be to use useEffect like so:
useEffect(() => {
const script = document.createElement('script');
script.src = "https://use.typekit.net/foobar.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, []);
Which makes it a great candidate for a custom hook (eg: hooks/useScript.js):
import { useEffect } from 'react';
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
};
export default useScript;
Which can be used like so:
import useScript from 'hooks/useScript';
const MyComponent = props => {
useScript('https://use.typekit.net/foobar.js');
// rest of your component
}
My favorite way is to use React Helmet – it's a component that allows for easy manipulation of the document head in a way you're probably already used to.
e.g.
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</Helmet>
...
</div>
);
}
};
https://github.com/nfl/react-helmet
Further to the answers above you can do this:
import React from 'react';
export default class Test extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.innerHTML = "document.write('This is output by document.write()!')";
this.instance.appendChild(s);
}
render() {
return <div ref={el => (this.instance = el)} />;
}
}
The div is bound to this and the script is injected into it.
Demo can be found on codesandbox.io
This answer explains the why behind this behavior.
Any approach to render the script tag doesn't work as expected:
Using the script tag for external scripts
Using dangerouslySetInnerHTML
Why
React DOM (the renderer for react on web) uses createElement calls to render JSX into DOM elements.
createElement uses the innerHTML DOM API to finally add these to the DOM (see code in React source). innerHTML does not execute script tag added as a security consideration. And this is the reason why in turn rendering script tags in React doesn't work as expected.
For how to use script tags in React check some other answers on this page.
If you need to have <script> block in SSR (server-side rendering), an approach with componentDidMount will not work.
You can use react-safe library instead.
The code in React will be:
import Safe from "react-safe"
// in render
<Safe.script src="https://use.typekit.net/foobar.js"></Safe.script>
<Safe.script>{
`try{Typekit.load({ async: true });}catch(e){}`
}
</Safe.script>
The answer Alex Mcmillan provided helped me the most but didn't quite work for a more complex script tag.
I slightly tweaked his answer to come up with a solution for a long tag with various functions that was additionally already setting "src".
(For my use case the script needed to live in head which is reflected here as well):
componentWillMount () {
const script = document.createElement("script");
const scriptText = document.createTextNode("complex script with functions i.e. everything that would go inside the script tags");
script.appendChild(scriptText);
document.head.appendChild(script);
}
I tried to edit the accepted answer by #Alex McMillan but it won't let me so heres a separate answer where your able to get the value of the library your loading in. A very important distinction that people asked for and I needed for my implementation with stripe.js.
useScript.js
import { useState, useEffect } from 'react'
export const useScript = (url, name) => {
const [lib, setLib] = useState({})
useEffect(() => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onload = () => setLib({ [name]: window[name] })
document.body.appendChild(script)
return () => {
document.body.removeChild(script)
}
}, [url])
return lib
}
usage looks like
const PaymentCard = (props) => {
const { Stripe } = useScript('https://js.stripe.com/v2/', 'Stripe')
}
NOTE: Saving the library inside an object because often times the library is a function and React will execute the function when storing in state to check for changes -- which will break libs (like Stripe) that expect to be called with specific args -- so we store that in an object to hide that from React and protect library functions from being called.
You can also use react helmet
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com/example" />
<script src="/path/to/resource.js" type="text/javascript" />
</Helmet>
...
</div>
);
}
};
Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.
I created a React component for this specific case: https://github.com/coreyleelarson/react-typekit
Just need to pass in your Typekit Kit ID as a prop and you're good to go.
import React from 'react';
import Typekit from 'react-typekit';
const HtmlLayout = () => (
<html>
<body>
<h1>My Example React Component</h1>
<Typekit kitId="abc123" />
</body>
</html>
);
export default HtmlLayout;
There is a very nice workaround using Range.createContextualFragment.
/**
* Like React's dangerouslySetInnerHTML, but also with JS evaluation.
* Usage:
* <div ref={setDangerousHtml.bind(null, html)}/>
*/
function setDangerousHtml(html, el) {
if(el === null) return;
const range = document.createRange();
range.selectNodeContents(el);
range.deleteContents();
el.appendChild(range.createContextualFragment(html));
}
This works for arbitrary HTML and also retains context information such as document.currentScript.
Here is how I was finally able to add two external JavaScript files in my React JS code:
These are the steps I followed.
Step 1:
I installed React-Helmet using npm i react-helmet from the terminal while inside my react-app folder path.
Step 2:
I then added import {Helmet} from "react-helmet"; header in my code.
Step 3:
Finally, in my code this is
how I added the external JS files using Helment
<Helmet>
<script src = "path/to/my/js/file1.js" type = "text/javascript" />
<script src = "path/to/my/js/file2.js" type = "text/javascript" />
</Helmet>
You can use npm postscribe to load script in react component
postscribe('#mydiv', '<script src="https://use.typekit.net/foobar.js"></script>')
You can find best answer at the following link:
https://cleverbeagle.com/blog/articles/tutorial-how-to-load-third-party-scripts-dynamically-in-javascript
const loadDynamicScript = (callback) => {
const existingScript = document.getElementById('scriptId');
if (!existingScript) {
const script = document.createElement('script');
script.src = 'url'; // URL for the third-party library being loaded.
script.id = 'libraryName'; // e.g., googleMaps or stripe
document.body.appendChild(script);
script.onload = () => {
if (callback) callback();
};
}
if (existingScript && callback) callback();
};
To add script tag or code in head tag <head>, use react-helmet package. it is light and have good documentation.
To add Js code in script tag inside body,
function htmlDecode(html) {
return html.replace(/&([a-z]+);/ig, (match, entity) => {
const entities = { amp: '&', apos: '\'', gt: '>', lt: '<', nbsp: '\xa0', quot: '"' };
entity = entity.toLowerCase();
if (entities.hasOwnProperty(entity)) {
return entities[entity];
}
return match;
});
}
render() {
const scriptCode = `<script type="text/javascript">
{(function() {
window.hello={
FIRST_NAME: 'firstName',
LAST_NAME: 'lastName',
};
})()}
</script>`
return(
<div dangerouslySetInnerHTML={{ __html: this.htmlDecode(scriptCode) }} />;
);
}
this code can be tested by console.log(windows.hello)
Very similar to other answers just using default values to clean up undefined checks
import { useEffect } from 'react'
const useScript = (url, selector = 'body', async = true) => {
useEffect(() => {
const element = document.querySelector(selector)
const script = document.createElement('script')
script.src = url
script.async = async
element.appendChild(script)
return () => {
element.removeChild(script)
}
}, [url])
}
export default useScript
usage
useScript('/path/to/local/script.js') // async on body
useScript('https://path/to/remote/script.js', 'html') // async on html
useScript('/path/to/local/script.js', 'html', false) // not async on html.. e.g. this will block
According to Alex McMillan's solution, I have the following adaptation.
My own environment: React 16.8+, next v9+
// add a custom component named Script
// hooks/Script.js
import { useEffect } from 'react'
// react-helmet don't guarantee the scripts execution order
export default function Script(props) {
// Ruels: alwasy use effect at the top level and from React Functions
useEffect(() => {
const script = document.createElement('script')
// src, async, onload
Object.assign(script, props)
let { parent='body' } = props
let parentNode = document.querySelector(parent)
parentNode.appendChild(script)
return () => {
parentNode.removeChild(script)
}
} )
return null // Return null is necessary for the moment.
}
// Use the custom compoennt, just import it and substitute the old lower case <script> tag with the custom camel case <Script> tag would suffice.
// index.js
import Script from "../hooks/Script";
<Fragment>
{/* Google Map */}
<div ref={el => this.el = el} className="gmap"></div>
{/* Old html script */}
{/*<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>*/}
{/* new custom Script component */}
<Script async={false} type="text/javascript" src='http://maps.google.com/maps/api/js' />
</Fragment>
A bit late to the party but I decided to create my own one after looking at #Alex Macmillan answers and that was by passing two extra parameters; the position in which to place the scripts such as or and setting up the async to true/false, here it is:
import { useEffect } from 'react';
const useScript = (url, position, async) => {
useEffect(() => {
const placement = document.querySelector(position);
const script = document.createElement('script');
script.src = url;
script.async = typeof async === 'undefined' ? true : async;
placement.appendChild(script);
return () => {
placement.removeChild(script);
};
}, [url]);
};
export default useScript;
The way to call it is exactly the same as shown in the accepted answer of this post but with two extra(again) parameters:
// First string is your URL
// Second string can be head or body
// Third parameter is true or false.
useScript("string", "string", bool);
I recently faced the issue,
Tried multiple solutions given here, at last sattled with iframe,
Iframe seems to work seamlessly if it you are trying to integrate a js plugin on a specific screen
<iframe
id="xxx"
title="xxx"
width="xxx"
height="xxx"
frameBorder="value"
allowTransparency
srcDoc={`
<!doctype html>
<html>
<head>
<title>Chat bot</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body style="width:100%">
<script type="text/javascript">
......
</script>
</body>
</html>
`}
/>
componentDidMount() {
const head = document.querySelector("head");
const script = document.createElement("script");
script.setAttribute(
"src",
"https://assets.calendly.com/assets/external/widget.js"
);
head.appendChild(script);
}
just add in body in html file
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
Honestly, for React - don't bother with messing around adding <script> tags to your header. It's a pain in the ass to get a callback when they have loaded fully. Instead, use a package like #charlietango/useScript to load the script when you need it and get a status update when it is completed.
Example usage:
import React from 'react'
import useScript, { ScriptStatus } from '#charlietango/use-script'
const Component = () => {
const [ready, status] = useScript('https://api.google.com/api.js')
if (status === ScriptStatus.ERROR) {
return <div>Failed to load Google API</div>
}
return <div>Google API Ready: {ready}</div>
}
export default Component
PS. If you're using redux to tell other components when your script has loaded, and are using redux-persist like I was, don't forget to include a modifier on your redux-persist setup that always sets the script loaded redux value to false in the redux backup.
for multiple scripts, use this
var loadScript = function(src) {
var tag = document.createElement('script');
tag.async = false;
tag.src = src;
document.getElementsByTagName('body').appendChild(tag);
}
loadScript('//cdnjs.com/some/library.js')
loadScript('//cdnjs.com/some/other/library.js')
For a more complete useScript implementation that supports loading status and error handling, check out this from useHooks.
Usage
function App() {
const status = useScript(
"https://pm28k14qlj.codesandbox.io/test-external-script.js"
);
return (
<div>
<div>
Script status: <b>{status}</b>
</div>
{status === "ready" && (
<div>
Script function call response: <b>{TEST_SCRIPT.start()}</b>
</div>
)}
</div>
);
}
Hook
function useScript(src) {
// Keep track of script status ("idle", "loading", "ready", "error")
const [status, setStatus] = useState(src ? "loading" : "idle");
useEffect(
() => {
// Allow falsy src value if waiting on other data needed for
// constructing the script URL passed to this hook.
if (!src) {
setStatus("idle");
return;
}
// Fetch existing script element by src
// It may have been added by another intance of this hook
let script = document.querySelector(`script[src="${src}"]`);
if (!script) {
// Create script
script = document.createElement("script");
script.src = src;
script.async = true;
script.setAttribute("data-status", "loading");
// Add script to document body
document.body.appendChild(script);
// Store status in attribute on script
// This can be read by other instances of this hook
const setAttributeFromEvent = (event) => {
script.setAttribute(
"data-status",
event.type === "load" ? "ready" : "error"
);
};
script.addEventListener("load", setAttributeFromEvent);
script.addEventListener("error", setAttributeFromEvent);
} else {
// Grab existing script status from attribute and set to state.
setStatus(script.getAttribute("data-status"));
}
// Script event handler to update status in state
// Note: Even if the script already exists we still need to add
// event handlers to update the state for *this* hook instance.
const setStateFromEvent = (event) => {
setStatus(event.type === "load" ? "ready" : "error");
};
// Add event listeners
script.addEventListener("load", setStateFromEvent);
script.addEventListener("error", setStateFromEvent);
// Remove event listeners on cleanup
return () => {
if (script) {
script.removeEventListener("load", setStateFromEvent);
script.removeEventListener("error", setStateFromEvent);
}
};
},
[src] // Only re-run effect if script src changes
);
return status;
}
I had raw html string with javascript/Jquery
i installed npm library dangerously-set-html-content
npm i dangerously-set-html-content
import InnerHTML from 'dangerously-set-html-content'
<div>
<InnerHTML html={html}/>
</div>
or
import InnerHTML from 'dangerously-set-html-content'
const renderhtml=`<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title> is not defined</title>$(document).ready(function(){ $("button").click(function(){ alert("jQuery is working perfectly."); }); });</script></head><body> <button type="button">Test jQuery Code</button></body></html>`
<div>
<InnerHTML html={renderhtml}/>
</div>
Make sure you add jquery cdn to public/index.html file
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" async="true" ></script>
You could try to use the following:
Make sure you trust the script
<script>{`
function myFunction(index, row) {
return index;
}
`}
</script>
You have to create a component for this script, you call this component as a standard ES6 script tag
'use strict';
import '../../styles/pages/people.scss';
import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';
import { prefix } from '../../core/util';
export default class extends Component {
render() {
return (
<DocumentTitle title="People">
<article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
<h1 className="tk-brandon-grotesque">People</h1>
</article>
</DocumentTitle>
);
class Component extend Index.App {
<script src="https://use.typekit.net/foobar.js" />
<script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}/>
}
}
};
Solution depends on scenario. Like in my case, I had to load a calendly embed inside a react component.
Calendly looks for a div and reads from it's data-url attribute and loads an iframe inside the said div.
It is all good when you first load the page: first, div with data-url is rendered. Then calendly script is added to body. Browser downloads and evaluates it and we all go home happy.
Problem comes when you navigate away and then come back into the page. This time the script is still in body and browser doesn't re-download & re-evaluate it.
Fix:
On componentWillUnmount find and remove the script element. Then on re mount, repeat the above steps.
Enter $.getScript. It is a nifty jquery helper that takes a script URI and a success callback. Once the script it loaded, it evaluates it and fires your success callback. All I have to do is in my componentDidMount $.getScript(url). My render method already has the calendly div. And it works smooth.
I saw the same problem, until I found this package, quite easy to implement, I hope it works as it worked for me :)
https://github.com/gumgum/react-script-tag
import React from 'react';
import Script from '#gumgum/react-script-tag';
import './App.css';
function App() {
return (
<div >
<h1> Graphs</h1>
<div class="flourish-embed flourish-network" data-src="visualisation/8262420">
<Script src"your script"
</Script>
</div>
</div>
);
}
export default App;
You can put your script in an Html file before react is being called.
Related
I’m implementing a rich text editor into a NextJS project. There are no React components for it, and it runs only on the client side, so I have to load the JavaScript and CSS files from an external source and work around SSR. Please don't recommend to use another tool, as that is not an option.
The tool works fine as a class component, but I’d like to port it into a functional component. When I test the functional component, it works occasionally — namely, after I change my file and save (even if it's just adding a space). But as soon as I refresh the page, I lose the editor. I thought it was because the component hadn’t mounted, but now I check for that, yet the issue persists.
I’ve tried various approaches, including Next’s Dynamic import with SSR disabled, but so far only the class method below has worked (the editor works by binding to the <textarea> element):
import React from "react";
import Layout from "../components/Layout";
class Page extends React.Component {
state = { isServer: true };
componentDidMount() {
this.MyEditor = require("../public/static/cool-editor.js");
this.setState({ isServer: false }); // Trigger rerender.
var app = MyEditor("entry"); // Create instance of editr.
}
render(props) {
return (
<Layout>
<textarea id="entry"></textarea>
</Layout>
);
}
}
export default Page;
Last attempt at functional component:
import React, { useEffect } from "react";
import Layout from "../components/Layout";
function hasWindow() {
const [isWindow, setIsWindow] = React.useState(false);
React.useEffect(() => {
setIsWindow(true);
return () => setIsWindow(false);
}, []);
return isWindow;
}
const Editor = () => {
useEffect(() => {
const script = document.createElement("script");
script.src =
"http://localhost:3000/static/article-editor/cool-editor.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
var app = MyEditor("entry");
return (
<Layout>
<textarea id="entry"></textarea>
</Layout>
);
};
const Page = () => {
const isWindow = hasWindow();
if (isWindow) return <Editor />;
return null;
};
export default Page;
You can use useRef hook in <textarea> tag:
const refContainer = useRef(null);
return <textarea ref={refContainer}>
then useEffect to check if the the element has been mounted.
useEffect(() => {
if (refContainer.current) {
refContainer.current.innerHTML = "ref has been mounted";
console.log("hello");
}
}, []);
Check the code here: https://codesandbox.io/s/modest-dubinsky-7r3oz
Some of the things I could suggest changing:
var app = MyEditor("entry"); is being created on every render. Consider using useRef as a way to keep instance variable: https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
In Editor, the MyEditor variable is not defined.
hasWindow includes a useEffect that runs once (with empty dependency array), I don't think it needs the clean up function. To check staying at browser or server, you could simply use const isServer = type of window === 'undefined'
Custom hook should be named with prefix use
Right now I am attempting to create a function in the ComponentDidMount lifecycle method that will inject a script tag into the return statement. This script will be used to invoke Clicktale. However, even after checking that the component has mounted and that the document state has reached 'complete', when I try to find the script tag it keeps returning undefined. Because of this I am unable to add attributes to the script tag that will invoke Clicktale. Typically with Clicktale you just need to add the script at the bottom of the body, but for the project I am working on I need to use React.
I know that when using the method getElementsByTagName in React it should return an array of elements that have that tag name. But when console logging
document.getElementsByTagName('script')
I just receive
HTMLCollection {}
Which I assume means it's empty since logging document.getElementsByTagName('script')[0]
returns undefined.
This is the main component:
import React, { Component } from 'react';
class Clicktale extends Component {
componentDidMount() {
if (!window.clickTaleTagInjected) {
const clickTaleTagInjected = true;
function injectTag() {
const ns = document.createElementNS;
const a = ns ? ns.call(document, 'http://www.w3.org/1999/xhtml', 'script') : document.createElement('script');
const s = document.getElementsByTagName('script')[0];
a.async = true;
a.crossOrigin = 'anonymous';
a.type = 'text/javascript';
a.src = 'specific clicktale cdn url I am using here';
s.parentNode.insertBefore(a, s);
}
if (document.readyState === 'complete') {
injectTag();
} else {
window.addEventListener('load', () => {
setTimeout(injectTag, 0);
});
}
}
}
render() {
return (
<div>
</div>
);
}
}
export default Clicktale;
And this is the parent component (I don't think this should be interfering?):
import React from 'react';
import Helmet from 'react-helmet';
import Clicktale from './Clicktale';
export const Parent = () => (
<div>
<Helmet
link={[
{
rel: 'stylesheet',
href: 'using private link here',
},
]}
/>
<Clicktale />
</div>
);
export default Parent;
The specific error I receive is:
TypeError: Cannot read property 'parentNode' of undefined
this refers to the line with
s.parentNode.insertBefore(a, s)
Ultimately, I was trying to figure out why it cannot find the script tag after it has been injected. I'm also wondering if I should have something other than div tags in the return? I figured the component would be able to inject a script tag in there with no issues, but this is...not the case.
Thank you for any pointers :)
I am currently exploring Bucklescript/ReasonML with Svelte 3 for my next project. Typical Svelte component is a .svelte file:
<script>
let name = 'world';
</script>
<h1>Hello world!</h1>
Instead, can I have script tag with src or equivalent to keep JS code in a separate file?
<script src='./some-file.js'></script>
By moving the js code to a separate file, the target of the Bucklescript compiler (which is a JS file) could be used for the component.
Vue.js already supports this with their SFC .vue file.
On a side note: I could use Vue.js for this but the presence Virtual DOM is problematic for legacy codebase. And, Svelte is diminishing at runtime and thus very much desirable. Also, the use this in Vue makes things awkward in Ocaml/Reason.
This is possible with the svelte.preprocess API, which you'd most commonly reach via the preprocess option in rollup-plugin-svelte or svelte-loader. Something like this should work (though I haven't tested it):
const path = require( 'path' )
const fs = require( 'fs' )
...
plugins: [
svelte({
// ...
preprocess: {
script: ({ content, attributes, filename }) => {
if ( 'string' === typeof attributes.src ) {
const file = path.resolve(path.dirname(filename), attributes.src);
const code = fs.readFileSync(file, 'utf-8');
return {code, dependencies: [file]};
}
}
}
})
]
As far as I know, this isn't possible right now.
What you could do is export everything you need from the js file, and then import them in the component: https://svelte.dev/repl/1d630ff27a0c48d38e4762cf6b0c2da5?version=3.7.1
<script>
import { name } from './mycode.js'
</script>
<h1>Hello {name}!</h1>
export let name = 'World';
However that would only be a partial solution as any mutation of data occurring within the file would not trigger a re-render of the DOM, as Svelte would not compile the .js file and would not be able to add its own code invalidating the values: https://svelte.dev/repl/c4b41b769ed747acb01a02a9af33e545?version=3.7.1
<script>
import { name, handleClick } from './mycode.js'
</script>
<h1 on:click={handleClick}>Hello {name}!</h1>
export let name = 'World';
export const handleClick = () => {
name = 'Everyone';
}
But that doesn't mean you can't be tricky if you are willing to go the extra mile to achieve this: https://svelte.dev/repl/8e259df629614ac99cb14cfae2f30658?version=3.7.1
<script>
import { name, handleClick } from './mycode.js'
const onClick = () => {
handleClick();
name = name;
}
</script>
<h1 on:click={onClick}>Hello {name}!</h1>
export let name = 'World';
export const handleClick = () => {
name = 'Everyone';
}
The extra line name = name forcing the DOM update.
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.
I am trying to load an external script in the middle of my React Component.
import React from 'react';
class Test extends React.Component {
componentDidMount() {
const script = document.createElement("script");
script.src = "http://example.com/form.js";
this.myDiv.appendChild(script);
}
render() {
return <div ref={e => (this.myDiv = e)} />;
}
}
Unfortunately the external script contains document.write. Therefore it gives me an error when I try to load it :
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
The error is quite easy to understand. As the script is run after the document as been parsed, it cannot use document.write.
What are my options to remedy this problem ?
What I did so far :
So far I have tried using Krux's postscribe module but failed to make it work :
import React from 'react';
class Test extends React.Component {
render() {
return (
<div>
<div id="myDiv" />
<script dangerouslySetInnerHTML={{
__html: postscribe(
"#myDiv",
<script src="http://example.com/form.js" />
)
}} />
</div>
);
}
}
Any help much appreciated
you can use "react-async-script-loader" npm module.
This module helps in lazy-loading scripts within component.
Or within React-component-lifecycle you can do something like this:
document.createElement('script');
asyncScript.src = 'your script url';
asyncScript.async = true;
asyncScript.onload = () => {
// The setTimeout lets us pretend that Stripe.js took a long time to load
// Take it out of your production code!
setTimeout(() => {
this.setState({
stateVariable: **window.{your script exposed object}**
});
}, 500);
};