Getting Started with searchstudio-ux-react

Example

This is an example of using the React/Next.js library with the SearchStax Site Search solution.

For a full React example, see searchstax-accelerator-react. For a full Next.js example, see next-js-example.

Installation

1
npm install --save @searchstax-inc/searchstudio-ux-react

Usage

Add following code to <head>

1
2
3
4
5
6
7
8
9
10
11
&lt;script type="text/javascript">
      var _msq = _msq || []; //declare object
      var analyticsBaseUrl = '&lt;https://analytics-us-east.searchstax.co>';
      (function () {
        var ms = document.createElement('script');
        ms.type = 'text/javascript';
        ms.src = '&lt;https://static.searchstax.co/studio-js/v3/js/studio-analytics.js>';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ms, s);
      })();
    &lt;/script>

Import Components

Import the necessary components:

1
2
3
4
5
import {
  SearchstaxWrapper,
  SearchstaxInputWidget,
  SearchstaxResultsWidget
} from '@searchstax-inc/searchstudio-ux-react';

Wrapper Component

Wrap all other Site Search components in SearchstaxWrapper:

1
2
3
4
5
&lt;SearchstaxWrapper>
 
  {/* Other SearchStudio components */}
 
&lt;/SearchstaxWrapper>

Configuration

Pass search configuration to SearchstaxWrapper:

1
2
3
4
5
6
7
8
9
10
11
12
&lt;SearchstaxWrapper
  language={sampleConfig.language}
  searchURL={sampleConfig.searchURL}
  suggesterURL={sampleConfig.suggesterURL}
  trackApiKey={sampleConfig.trackApiKey}
  searchAuth={sampleConfig.searchAuth}
  authType={sampleConfig.authType}
  router={sampleConfig.router}
  beforeSearch={sampleConfig.hooks.beforeSearch}
  afterSearch={sampleConfig.hooks.afterSearch}
>
&lt;/SearchstaxWrapper>

Initialization example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const sampleConfig = {
  language: 'en',
  searchURL: '',
  suggesterURL: '',
  trackApiKey: '',
  searchAuth: '',
  authType: 'basic',
  router: {
    enabled: true,
    routeName: 'searchstax',
    title: (result) => `Search results for: ${result.query}`,
    ignoredKeys: []
  },
  hooks: {
    beforeSearch: (props) => {
// modify props
      return props;
    },
    afterSearch: (results) => {
// modify results
      return results;
    }
  }
};

The sampleConfig needs to match the ISearchstaxConfig interface.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface ISearchstaxConfig {
  language: string; // language code. Example: 'en'
  searchURL: string; // SearchStudio select endpoint
  suggesterURL: string; //SearchStudio suggest endpoint
  trackApiKey: string; // Api key used for tracking events
  searchAuth: string; // Authentication value. based on authType it's either a token value or basic auth value
  authType: "token" | "basic"; // Type of authentication
  autoCorrect?: boolean; // if set to true it will autoCorrect misspelled words. Default is false
  router?: IRouterConfig; // optional object containing router settings
  hooks?: {
    // optional object that provides various hook options
    beforeSearch?: (props: ISearchObject) => ISearchObject | null; // this function gets called before firing search. searchProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
    afterSearch?: (results: ISearchstaxParsedResult[]) => ISearchstaxParsedResult[]; // this function gets called after firing search and before rendering. It needs to return array of results that are either modified or untouched.
  };
}

Adding Components

Add any other Site Search components as needed:

1
2
3
4
5
6
7
8
9
&lt;SearchstaxWrapper>
 
  &lt;SearchstaxInputWidget />
 
  &lt;SearchstaxResultsWidget />
 
  {/* Other components */}
 
&lt;/SearchstaxWrapper>

Styles

Import the CSS:

1
import '@searchstax-inc/searchstudio-ux-react/dist/styles/mainTheme.css';

See the React Styling section for information on theming and customization.