REACT

useScript Hook

A custom React Hook to dynamically load external scripts with TypeScript support

ReactHooksScriptsDynamicLoadingExternal

Code

import { useState, useEffect } from 'react';

type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';

function useScript(src: string): ScriptStatus {
  const [status, setStatus] = useState<ScriptStatus>(() => {
    __TOKEN_46__ (typeof window === 'undefined') return 'idle';
    // Check if script already exists
    const existingScript = document.querySelector(`script[src="${src}"]`);
    return existingScript ? 'ready' : 'idle';
  });

  useEffect(() => {
    __TOKEN_51__ (typeof window === 'undefined' || status === 'ready') return;

    let script: HTMLScriptElement | null = document.querySelector(`script[src="${src}"]`);

    __TOKEN_55__ (!script) {
      script = document.createElement('script');
      script.src = src;
      script.async = true;
      script.setAttribute('data-status', 'loading');
      document.body.appendChild(script);

      // Update status attributes
      const setAttributeFromEvent = (event: Event) => {
        __TOKEN_58__ (!script) return;
        const newStatus = event.type === 'load' ? 'ready' : 'error';
        script.setAttribute('data-status', newStatus);
        setStatus(newStatus);
      };

      script.addEventListener('load', setAttributeFromEvent);
      script.addEventListener('error', setAttributeFromEvent);
    } else {
      // Use existing script status
      setStatus(script.getAttribute('data-status') as ScriptStatus || 'ready');
    }

    // Cleanup
    __TOKEN_63__ () => {
      __TOKEN_64__ (script) {
        script.removeEventListener('load', setAttributeFromEvent);
        script.removeEventListener('error', setAttributeFromEvent);
      }
    };

    function setAttributeFromEvent(event: Event) {
      __TOKEN_66__ (!script) return;
      const newStatus = event.type === 'load' ? 'ready' : 'error';
      script.setAttribute('data-status', newStatus);
      setStatus(newStatus);
    }
  }, [src, status]);

  return status;
}

// Usage example
// const scriptStatus = useScript('https://cdn.jsdelivr.net/npm/chart.js');
// if (scriptStatus === 'ready') {
//   // Initialize Chart.js
// } else if (scriptStatus === 'error') {
//   console.error('Failed to load Chart.js');
// }