Getting Started with searchstudio-ux-react

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

<script type="text/javascript">
      var _msq = _msq || []; //declare object
      var analyticsBaseUrl = '<https://analytics-us-east.searchstax.co>';
      (function () {
        var ms = document.createElement('script');
        ms.type = 'text/javascript';
        ms.src = '<https://static.searchstax.co/studio-js/v3/js/studio-analytics.js>';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ms, s);
      })();
    </script>

import { 
  SearchstaxWrapper,
  SearchstaxInputWidget,
  SearchstaxResultsWidget
} from '@searchstax-inc/searchstudio-ux-react';

<SearchstaxWrapper>

  {/* Other SearchStudio components */}

</SearchstaxWrapper>

<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}
>
</SearchstaxWrapper>

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;
    }
  }
};

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.
  };
}

<SearchstaxWrapper>

  <SearchstaxInputWidget />

  <SearchstaxResultsWidget />

  {/* Other components */}

</SearchstaxWrapper>

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