React Integration

Add SearchX to any React application with a simple hook-based approach.

Step 1: Add Scripts to HTML

Add the SearchX SDK scripts to your public/index.html:

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://helloworld-pc.github.io/searchx-components/searchx-sdk.umd.js"></script>

Step 2: Create the Integration Module

Create a src/search-x.js file:

import { useEffect } from 'react';

const SEARCHX_CONFIG = {
  app_id: 'YOUR_APP_ID',
  api_key: 'YOUR_API_KEY',
  components: {
    SearchBar: { root: 'searchx-bar' },
    SearchPage: { root: 'searchx-page' },
  },
  settings: {
    wishlistEnabled: true,
  },
};

export const SearchXInit = () => {
  useEffect(() => {
    const interval = setInterval(() => {
      if (window.SearchXSDK?.init) {
        window.SearchXSDK.init(SEARCHX_CONFIG);
        clearInterval(interval);
      }
    }, 100);
    return () => clearInterval(interval);
  }, []);

  return null;
};

export const SearchXBar = () => <div id="searchx-bar" />;
export const SearchXPage = () => <div id="searchx-page" />;

Step 3: Use in Your App

import React from 'react';
import { SearchXInit, SearchXBar, SearchXPage } from './search-x';

export default function App() {
  return (
    <div className="app-container">
      <SearchXInit />

      <header>
        <SearchXBar />
      </header>

      <main>
        <SearchXPage />
      </main>
    </div>
  );
}

Next Steps

• See the SDK Reference for all configuration options.
• Learn about Event Handling for custom add-to-cart logic.