React Component

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 Zoovu Search (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 logging into Zoovu Search.

Props

siteId (String)

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

zoovuSearchConfig (Object)

Zoovu Search configuration object.

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 Zoovu Search component for React, which makes it possible to use components like this: <SiteSearch360 siteId=".." alias="mysite1"> and <SiteSearch360 siteId=".." alias="mysite2">. This way, if you wish to use a callback for a specific instance, you can do it like this:

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

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

If you're using Gatsby:

You can easily integrate Zoovu Search 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>
   );
}