React hook to execute or load scripts inside element with html provided by dangerouslySetInnerHTML. It'll mount scripts within the component provided by react ref and execute scripts with correct document.currentScript
property.
$ npm i react-html-script-eval
import { useHtmlScriptEval } from "react-html-script-eval";
useHtmlScriptEval(
html: string,
ref: RefObject<HTMLElement>
) => void;
import React, { FC, useRef } from 'react';
import { useHtmlScriptEval } from 'react-html-script-eval';
interface AdBannerProps {
html: string;
}
const AdBanner: FC<AdBannerProps> = ({ html }) => {
const ref = useRef < HTMLDivElement > null;
useHtmlScriptEval(html, ref);
return <div ref={ref} dangerouslySetInnerHTML={{ __html: html }} />;
};
export default AdBanner;
$ npm run test