JsonLD.ioJsonLD.io

React

Add JsonLD.io to your React application.

Create React App / Vite

Add the script to your public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>

    <!-- JsonLD.io Script -->
    <script async src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

Using React Helmet

If you use React Helmet for managing document head:

import { Helmet } from 'react-helmet';

function App() {
    return (
        <>
            <Helmet>
                <script async src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js" />
            </Helmet>
            {/* Your app content */}
        </>
    );
}

Using useEffect Hook

For more control, load the script dynamically:

import { useEffect } from 'react';

function App() {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js';
        script.async = true;
        document.head.appendChild(script);

        return () => {
            document.head.removeChild(script);
        };
    }, []);

    return (
        // Your app content
    );
}

Single Page Applications (SPA)

For SPAs with client-side routing, the JsonLD.io script automatically handles URL changes. The script detects the current URL and serves the matching schema.

If you need to manually trigger a schema refresh after navigation:

// After route change
window.dispatchEvent(new Event('popstate'));

Environment Variables

Store your token in environment variables:

REACT_APP_JSONLD_TOKEN=your_token_here

Then use it in your code:

<script async src={`https://jsonld.io/api/jsonld/${process.env.REACT_APP_JSONLD_TOKEN}?format=js`} />

Verification

  1. Run your React app
  2. Open browser DevTools
  3. Check the Elements tab for <script type="application/ld+json">
  4. Or view page source and search for application/ld+json
ShopifyVue