useScript Hook
A custom React Hook to dynamically load external scripts with TypeScript support
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');
// }