refactor(project): update project

Author: olavoparno

.eslintrc.js

@@ -46,5 +46,6 @@ module.exports = {
     ],
     'react/state-in-constructor': 'off',
     'no-console': 'off',
+    'no-restricted-syntax': 'off',
   },
 };

CHANGELOG.md

@@ -1,8 +1,8 @@
-# react-use-hotjar
+# react-use-script
 
-> Adds [Hotjar](https://www.hotjar.com/) capabilities as custom hooks to your project
+> Appends script tags to the document with ease
 
-[![NPM](https://img.shields.io/npm/v/react-use-hotjar.svg)](https://www.npmjs.com/package/react-use-hotjar)
+[![NPM](https://img.shields.io/npm/v/react-use-script.svg)](https://www.npmjs.com/package/react-use-script)
 
 ---
 

README.md

@@ -1,12 +1,12 @@
 {
-  "name": "react-use-hotjar",
+  "name": "react-use-script",
   "version": "1.0.6",
-  "description": "Add Hotjar capabilities as custom hooks",
+  "description": "Appends script tags to the document",
   "author": "Olavo Parno",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git://github.com/olavoparno/react-use-hotjar.git"
+    "url": "git://github.com/olavoparno/react-use-script.git"
   },
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package-lock.json

@@ -1,59 +1,124 @@
 import * as React from 'react';
-import useAppendHeadScript from './useAppendHeadScript';
-
-type TUseHotjar = {
-  initHotjar: (
-    hotjarId: string,
-    hotjarVersion: string,
-    logCallback?: () => void
-  ) => boolean;
-  identifyHotjar: (
-    userId: string,
-    userInfo: string,
-    logCallback?: () => void
-  ) => boolean;
+
+type TScriptLoader = {
+  onCreate?: (() => null) | undefined;
+  onLoad?: (() => null) | undefined;
+  onError?: ((e: any) => never) | undefined;
+  delayMs?: number | undefined;
+  htmlPart?: string | undefined;
+  src: string;
+  otherProps?: Record<string, unknown> | undefined;
+};
+
+type TAppendScript = {
+  id: string;
+  scriptText: string;
+  optionalCallback?: (() => null) | undefined;
+  htmlPart: string;
+  otherProps?: Record<string, unknown> | undefined;
+};
+
+type TUseScript = {
+  ScriptLoader: {
+    ({
+      onCreate,
+      onLoad,
+      onError,
+      delayMs,
+      htmlPart,
+      src,
+      ...otherProps
+    }: TScriptLoader): null;
+  };
+  appendScript: {
+    ({
+      id,
+      scriptText,
+      optionalCallback,
+      htmlPart,
+      otherProps,
+    }: TAppendScript): boolean;
+  };
+};
+
+const handleScriptAttributes = (
+  script: HTMLScriptElement,
+  otherProps: Record<string, unknown>
+) => {
+  for (const [attr, value] of Object.entries(otherProps)) {
+    script.setAttribute(attr, value as string);
+  }
+};
+
+const ScriptLoader = ({
+  onCreate = () => null,
+  onLoad = () => null,
+  onError = (e) => {
+    throw new URIError(`The script ${e.target.src} is not accessible`);
+  },
+  delayMs = 0,
+  htmlPart = 'head',
+  src,
+  ...otherProps
+}: TScriptLoader): null => {
+  const appendScript = React.useCallback(() => {
+    const script = global.document.createElement('script');
+
+    script.src = src;
+
+    if (otherProps) {
+      handleScriptAttributes(script, otherProps as Record<string, unknown>);
+    }
+
+    script.onload = onLoad;
+    script.onerror = onError;
+
+    global.document[htmlPart].appendChild(script);
+
+    onCreate();
+  }, [onCreate, onError, onLoad, otherProps, src, htmlPart]);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => appendScript(), delayMs);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [appendScript, delayMs]);
+
+  return null;
+};
+
+const appendScript = ({
+  id,
+  scriptText,
+  optionalCallback = () => null,
+  htmlPart = 'head',
+  otherProps = {},
+}: TAppendScript): boolean => {
+  try {
+    const existentScript = global.document.getElementById(
+      id
+    ) as HTMLScriptElement;
+    const script = existentScript || global.document.createElement('script');
+
+    script.id = id;
+    script.innerText = scriptText.toString();
+
+    handleScriptAttributes(script, otherProps);
+
+    global.document[htmlPart].appendChild(script);
+
+    optionalCallback();
+
+    return true;
+  } catch (error) {
+    console.error('Must be a string!', error);
+
+    return false;
+  }
 };
 
-export function useHotjar(): TUseHotjar {
-  const { appendHeadScript } = useAppendHeadScript();
-
-  const initHotjar = React.useCallback(
-    (hotjarId: string, hotjarVersion: string, loggerFunction): boolean => {
-      const hotjarScript = `(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};h._hjSettings={hjid:${hotjarId},hjsv:${hotjarVersion}};a=o.getElementsByTagName('head')[0];r=o.createElement('script');r.async=1;r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;a.appendChild(r);})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`;
-      const isHotjarAppended = appendHeadScript(hotjarScript, 'hotjar-script');
-
-      if (loggerFunction && typeof loggerFunction === 'function')
-        loggerFunction(`Hotjar ready: ${isHotjarAppended}`);
-
-      return isHotjarAppended;
-    },
-    [appendHeadScript]
-  );
-
-  const identifyHotjar = React.useCallback(
-    (userId: string, userInfo: string, loggerFunction): boolean => {
-      try {
-        const hotjarIdentifyScript = `var userId="${userId}" || null;window.hj("identify",userId,${userInfo});`;
-        const isIdentified = appendHeadScript(
-          hotjarIdentifyScript,
-          'identify-script'
-        );
-
-        if (loggerFunction && typeof loggerFunction === 'function')
-          loggerFunction(`Hotjar identified: ${isIdentified}`);
-
-        return isIdentified;
-      } catch (error) {
-        console.error('Hotjar error:', error);
-
-        return false;
-      }
-    },
-    [appendHeadScript]
-  );
-
-  return React.useMemo(() => ({ initHotjar, identifyHotjar }), [
-    initHotjar,
-    identifyHotjar,
-  ]);
+export function useScript(): TUseScript {
+  return React.useMemo(() => ({ ScriptLoader, appendScript }), []);
 }