Use Woosmap Store Locator JS API in a React app
How to load the Woosmap Loader JS using react hooks
- Create a React Hook to load External JS File
- Load Woosmap Loader with the hook
- Example: Build an InfoWindow Component
This guide is outdated and will be taken down shortly. To integrate Woosmap Map with React, please use the Woosmap Map JS library. You can refer to this code sample for guidance: React Map Basic.
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.
