React

Here is a way to load the snippet with React

// For project using Hook component
useEffect(() => {
    window.jimo = [];
    const s = document.createElement('script');

    s.type = 'text/javascript';
    s.async = true;
    s.src = "https://undercity.usejimo.com/jimo-invader.js";
    window['JIMO_PROJECT_ID'] = "ID_OF_YOUR_PROJECT"; // Update this
    document.getElementsByTagName('head')[0].appendChild(s);
}, []);



// For project using Class component
async componentDidMount() {
    const s = document.createElement('script');

    window.jimo = [];
    s.type = 'text/javascript';
    s.async = true;
    s.src = "https://undercity.usejimo.com/jimo-invader.js";
    window['JIMO_PROJECT_ID'] = "ID_OF_YOUR_PROJECT"; // Update this
    document.getElementsByTagName('head')[0].appendChild(s);
}

React Router v6+

If you are using React Router v6+, you need to add an additional configuration to make sure Jimo is working correctly.

    // You should already have this
    useEffect(() => {
        window.jimo = [];
        const s = document.createElement('script');

        s.type = 'text/javascript';
        s.async = true;
        s.src = "https://undercity.usejimo.com/jimo-invader.js";
        window['JIMO_PROJECT_ID'] = "ID_OF_YOUR_PROJECT"; // Update this
        document.getElementsByTagName('head')[0].appendChild(s);
    }, []);

    // Add this if you are using React Router v6 or higher
    const location = useLocation();

    useEffect(() => {
        window.jimo.push(["do", "boosted:hash-change"]);
    }, [location]);