All Collections
Quick Start Guides
React
Add the store locator to a React component
Add the store locator to a React component
Let's see how we install our store locator widget inside a React component.
Adriano avatar
Written by Adriano
Updated over a week ago

In order to use the store locator with your React application, you need to use the Option 3 in the Install the Store Locator Widget page with few tweaks.

Add this to head scripts of your HTML:

<script src="//cdn.storerocket.io/widget.js"></script> 

Then in your React component HTML, create a div to use for the store locator:

<div class="store-locator-widget"></div> 

Lastly, we need to initialize the store locator after your component has rendered. The best way to do so is in the componentDidMount() method of your component:

let config = {
    selector: ".store-locator-widget",
    account: "<YOUR_ACCOUNT_ID>"
};

window.StoreRocket.init(config);

Everything should work now! 😊

If you need help, send us a message and we'll help you specifically for your case.

Did this answer your question?