useScript

A hook to load external scripts dynamically.

Overview

useScript simplifies loading external scripts (like Google Analytics, Stripe, or visualization libraries). It handles loading states, error handling, and prevents duplicate script injection.

Demo

External Lib

Script Loader

Dynamically load canvas-confetti and track its status.

LOADING

API Reference

function useScript(src: string): ScriptStatus

Type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error'

Parameters

NameTypeDescription
srcstringThe source URL of the script to load.

Usage Example

import { useScript } from 'react-hooks-ts'
 
function StripeComponent() {
  const status = useScript('https://js.stripe.com/v3/')
 
  if (status === 'loading') return <div>Loading Stripe...</div>
  if (status === 'error') return <div>Failed to load Stripe</div>
 
  return <div>Stripe is ready!</div>
}