Skip to main content

Script

Description​

A component for adding script tags to your pages. Supports external scripts, inline scripts, modules, and JSON-LD with validation and sanitization.

Import​

import { Script } from '@components/common/Script';

Basic Usage​

import { Script } from '@components/common/Script';

// External script
<Script src="/path/to/script.js" />

// Inline script
<Script>
  {`console.log('Hello World');`}
</Script>

Script Component Props​

PropTypeDefaultDescription
srcstring-External script URL
asyncbooleanfalseLoad script asynchronously
deferbooleanfalseDefer script execution
typestring'text/javascript'Script type (module, importmap, etc.)
crossOrigin'anonymous' | 'use-credentials'-CORS settings
integritystring-Subresource integrity hash
noncestring-Content Security Policy nonce
fetchPriority'high' | 'low' | 'auto''auto'Resource fetch priority

Helper Components​

ScriptExternal​

For loading external JavaScript files:

import { ScriptExternal } from '@components/common/Script';

<ScriptExternal 
  src="https://cdn.example.com/script.js" 
  async={true}
/>

ScriptModule​

For ES modules:

import { ScriptModule } from '@components/common/Script';

// External module
<ScriptModule src="/path/to/module.js" />

// Inline module
<ScriptModule>
  {`import { something } from './module.js';`}
</ScriptModule>

ScriptInline​

For inline JavaScript:

import { ScriptInline } from '@components/common/Script';

<ScriptInline>
  {`
    console.log('Inline script');
    window.myVar = 'value';
  `}
</ScriptInline>

ScriptJSON​

For JSON-LD structured data:

import { ScriptJSON } from '@components/common/Script';

<ScriptJSON
  id="product-schema"
  data={{
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "Product Name",
    "price": "99.99"
  }}
/>

ScriptImportMap​

For import maps:

import { ScriptImportMap } from '@components/common/Script';

<ScriptImportMap
  imports={{
    "react": "https://cdn.example.com/react.js",
    "react-dom": "https://cdn.example.com/react-dom.js"
  }}
/>

Examples​

Loading Analytics​

import { ScriptExternal } from '@components/common/Script';

<ScriptExternal
  src="https://www.googletagmanager.com/gtag/js?id=GA_ID"
  async={true}
/>

Inline Configuration​

import { ScriptInline } from '@components/common/Script';

<ScriptInline>
  {`
    window.appConfig = {
      apiUrl: '${process.env.API_URL}',
      debug: ${process.env.NODE_ENV === 'development'}
    };
  `}
</ScriptInline>

Product Schema​

import { ScriptJSON } from '@components/common/Script';

function ProductPage({ product }) {
  return (
    <>
      <ScriptJSON
        data={{
          "@context": "https://schema.org",
          "@type": "Product",
          "name": product.name,
          "description": product.description,
          "image": product.image,
          "offers": {
            "@type": "Offer",
            "price": product.price,
            "priceCurrency": "USD"
          }
        }}
      />
    </>
  );
}

With Integrity Hash​

import { ScriptExternal } from '@components/common/Script';

<ScriptExternal
  src="https://cdn.example.com/library.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossOrigin="anonymous"
/>

Validation Rules​

The component validates in development mode:

  • Cannot have both src and inline content
  • Cannot use both async and defer
  • async and defer only work with external scripts
  • integrity requires src attribute

Features​

  • Type Safe: Full TypeScript support
  • Validation: Development-time prop validation
  • Sanitization: Automatically sanitizes props
  • Helper Components: Pre-configured for common patterns
  • CSP Support: Nonce attribute for Content Security Policy
  • Module Support: ES module and import map support
  • JSON-LD: Easy structured data with ScriptJSON
  • Meta - HTML meta tags component
  • Area - Component container system