Using Multiple Searchcraft Instances

The JavaScript SDK supports multiple Searchcraft instances to handle advanced search scenarios. Use multiple instances when you need to:

• Render multiple sets of search results on a single page.
• Display search results from separate, non-federated indexes on a single page.

How It Works

Each Searchcraft instance maintains its own isolated state, including search results, loading states, and other data. The SDK handles all state management automatically.

Creating Multiple Instances

Use the optional second parameter of the Searchcraft Class constructor to assign a unique identifier to each instance:

main.ts

// Instance 1
const instance1 = new Searchcraft(
  {
    readKey: INDEX_1_READ_KEY,
    endpointURL: INDEX_1_ENDPOINT_URL,
    indexName: INDEX_1_NAME,
  },
  'searchcraftInstance1'
)

// Instance 2
const instance2 = new Searchcraft(
  {
    readKey: INDEX_2_READ_KEY,
    endpointURL: INDEX_2_ENDPOINT_URL,
    indexName: INDEX_2_NAME,
  },
  'searchcraftInstance2'
)

Connecting Components to Instances

Map components to specific instances using the searchcraft-id prop:

Component.tsx

<div>
  {/* Instance 1 Components */}
  <div>
    <h1>Instance 1</h1>
    <div style={{ marginBottom: 20 }}>
      <searchcraft-input-form searchcraft-id="searchcraftInstance1" />
    </div>
    <searchcraft-search-results searchcraft-id="searchcraftInstance1" />
  </div>

  {/* Instance 2 Components */}
  <div>
    <h1>Instance 2</h1>
    <div style={{ marginBottom: 20 }}>
      <searchcraft-input-form searchcraft-id="searchcraftInstance2" />
    </div>
    <searchcraft-search-results searchcraft-id="searchcraftInstance2" />
  </div>
</div>

Components with matching searchcraft-id values will automatically use the state from the corresponding Searchcraft instance.