Can I use Site Search 360 with React?

Note: The following only applies to script version v13.3 or newer.

The Site Search 360 React component provides a simple way of adding Site Search 360 to your React app.

Installation

If you are using NPM:

npm install site-search-360-react

If you are using Yarn:

yarn add site-search-360-react

Usage

To add Site Search 360 (search box and a search button) to your site, use the SiteSearch360 component.

Make sure to use your siteId to connect the search to your account. The value of the siteId prop can be found under Account -> General after signing up to Site Search 360.

Props

siteId (String)

The Site ID of your Site Search 360 project. This setting can also be set in the ss360Config prop.

ss360Config (Object)

Site Search 360 configuration object. See the Site Search 360 installation docs for more details.

showButton (Boolean)

Whether to display a search button. Default: true

applyStyling (Boolean)

Whether to apply default styling to the search input. Default: true

We support adding an alias on the Site Search 360 component for React, which makes it possible to use components like this: <SiteSearch360 siteId=".." alias="SS360mysite1"> and <SiteSearch360 siteId=".." alias="SS360mysite2">. This way, if you wish to use a callback for a specific instance, you can do it like this:

callbacks: {
init: function () {
setTimeout(() => window.SS360_mysite1.showResults("*"), 1);
}
},
callbacks: {
init: function () {
setTimeout(() => window.SS360_mysite2.showResults("*"), 1);
}
},

Multiple Site Search 360 search boxes with different Site IDs

The way we support this is in the following ways:

1. Either you have a standard ss360Config and a ss360Configs map, which maps an alias to configurations:

/ #1 /
window.ss360Config = { siteId: 'mysite', searchBox: { selector: '#searchBox1' } };
window.ss360Configs = {SS360SECONDSEARCH: { siteId: 'mysite2', searchBox: { selector: '#searchBox2' } 
}
};



2. Or you can make your ss360Config an array and have multiple entries (you can also specify an alias):

/ #2 /
window.ss360Config = [{ siteId: 'mysite', searchBox: { selector: '#searchBox1' } }, { siteId: 'mysite2', searchBox: { selector: '#searchBox2' } }]