Use Woosmap Store Locator JS API in a React app

How to load the Woosmap Loader JS using react hooks

  1. Create a React Hook to load External JS File
  2. Load Woosmap Loader with the hook
  3. Example: Build an InfoWindow Component

React is a popular JavaScript library used for building user interfaces or UI components. Although the Woosmap Store Locator JS API does not offer any npm package, you can easily integrate it in your React app.

We’ve built a step-by-step tutorial to help integrate Woosmap in your React App on the community website.

Create a React Hook to load External JS File

Hooks let’s access React’s state and lifecycle methods from a functional component. The useEffect Hook is a function that runs after render and every time the DOM updates. Passing in an empty array runs the effects only after the initial render. Passing in props runs effects every time the props changed.

useEffect(() => {
    console.log(`script alreadey loaded? ${scriptLoaded}`);
}, [scriptLoaded])

To instantiate the Map object once the Woosmap javascript loader is fully loaded to the DOM we recommend implementing a useEffect hook as described below.

import {useEffect, useState} from 'react';

export default function useScript(src) {
    try {
        const [loaded, setLoaded] = useState(false);
        useEffect(() => {
            let script = document.querySelector(`script[src="${src}"]`);
            if (!script) {
                script = document.createElement('script');
                script.src = src;
                script.async = true;
                script.onload = function () {
                    setLoaded(true)
                }
                document.body.appendChild(script);
            } else {
                setLoaded(true)
            }
        }, [src]);
        return loaded;
    } catch (err) {
        console.error(`An error occurred while loading ${src}`);
    }
}

Load Woosmap Loader with the hook

You can now load the Woosmap loader script like this:

Map.js

import {useEffect} from "react";
import useScript from "./hooks/useScript";

const Map = () => {
    const woosmapLoaded = useScript("https://sdk.woosmap.com/locator/loader.js");
    useEffect(() => {
        if (woosmapLoaded) {
            initMap();
        }
    }, [woosmapLoaded]);
}

Example: Build an InfoWindow Component

Let’s see an example to dynamically render a logical React component as an InfoWindow.

The goal is to access the container of your InfoWindow right after appended to the DOM. For this, use the infoWindow.setOpeningCallback() method.

You can then render your own component using ReactDOM.render(<Component/>, domContainer).

const templateInfoWindow = "<div id='infoWindow-{{store_id}}'></div>";
const templateRenderer = new window.woosmap.TemplateRenderer(templateInfoWindow);
const infoWindow = new window.woosmap.LocatorWindow(map, templateRenderer);
infoWindow.setOpeningCallback(() => {
    const selectedStore = infoWindow.get('selectedStore').properties;
    return ReactDOM.render(
        <InfoWindow store={selectedStore}/>, 
        document.getElementById(`infoWindow-${selectedStore.store_id}`)
    );
});
mapView.bindTo("selectedStore", infoWindow);

To go further, check the woosmap-react-examples GitHub repository where you can access some more advanced examples.

Was this article helpful?
Have more questions? Submit a request