Can I use Site Search 360 with React?

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.

import SiteSearch360 from 'site-search-360-react';

<SiteSearch360 siteId="yoursite.com" />

// OR in vanilla JS

React.createElement(SiteSearch360, { siteId: 'yoursite.com' });

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() {
      setTimeout(() => window.SS360_mysite1.showResults("*"), 1);
   }
}

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

If you're using Gatsby:

You can easily integrate Site Search 360 into Gatsby, the open source framework. Here is the code snippet:

import React from "react"
import { useStaticQuery, Link, graphql } from "gatsby"
import SiteSearch360 from 'site-search-360-react';

export default function Layout({ children }) {
   const data = useStaticQuery(
      graphql`
         query {
            site {
                  siteMetadata {
                     title
                  }
            }
      }`
   );
   return (
    <div>
      <Link to={`/`}>
        <h3>{data.site.siteMetadata.title}</h3>
      </Link>
      <Link to={`/about/`}>
        About
      </Link>
	  <SiteSearch360 siteId="yoursite.com" />
      {children}
    </div>
   );
}