@searchcraft/react-sdk 0.8.1 → 0.9.0

package/README.md

@@ -24,29 +24,37 @@ The React SDK provides the following prebuilt components for use in your applica
 
 ```jsx
 
-<SearchInputForm />
-<SearchPopoverForm />
-<FilterPanel />
-<ResultsInfo />
-<BaseSearchResults />
+<SearchcraftInputForm />
+<SearchcraftPopoverForm />
+<SearchcraftFilterPanel />
+<SearchcraftResultsInfo />
+<SearchcraftBaseSearchResults />
+<SearchcraftPagination />
 
 ```
 
 These components can be rendered directly in your app and customized with configurations as needed.
 
-Example Setup
+#### Example Setup
 
+As early as possible in the app lifecycle, initialize the Searchcraft object:
 ```jsx
+import { Searchcraft } from '@searchcraft/react-sdk';
 
-import React from 'react';
-import { SearchInputForm, FilterPanel, BaseSearchResults } from '@searchcraft/react-sdk/components';
-
-const config = {
+const searchcraft = new Searchcraft({
   index: ['your_index_from_vektron'],
   readKey: 'your_read_key_from_vektron',
   endpointURL: 'your_searchcraft_endpoint_url',
-  searchDebounceDelay: 50, // Optional debounce delay in milliseconds
-};
+})
+
+```
+
+Add components to your application:
+
+```jsx
+
+import React from 'react';
+import { SearchInputForm, FilterPanel, BaseSearchResults } from '@searchcraft/react-sdk';
 
 const filterPanelItems = [
   {
@@ -68,7 +76,7 @@ const filterPanelItems = [
 const App = () => {
   return (
     <>
-      <SearchInputForm config={config} />
+      <SearchInputForm />
       <FilterPanel items={filterPanelItems} />
       <BaseSearchResults />
     </>
@@ -173,32 +181,30 @@ export const searchResultMappings = {
 
 ```
 
-Event Handling
-
-The React SDK components support event handling for common actions such as query submission, input focus, or search results.
+#### Event Handling
+You can subscribe to various events within Searchcraft:
 
 ```jsx
 
-<SearchInputForm
-  onQuerySubmit={(event) => {
-    console.log('Query submitted:', event.detail);
-  }}
-  onInputFocus={() => {
-    console.log('Input focused');
-  }}
-  onInputBlur={() => {
-    console.log('Input blurred');
-  }}
-/>
-
-<BaseSearchResults
-  onNoResults={() => {
-    console.log('No results found');
-  }}
-/>
+  const searchcraft = new Searchcraft({
+    index: ['your_index_from_vektron'],
+    readKey: 'your_read_key_from_vektron',
+    endpointURL: 'your_searchcraft_endpoint_url',
+    searchDebounceDelay: 50, // The amount of debounce, in millis, to add to search requests (optional)
+  });
 
+  const unsubscribeCallback = searchcraft.subscribe('query_submitted', (event) => {
+    // Do something in your application when a query has been submitted
+  });
+
+
+  const unsubscribeCallback = searchcraft.subscribe('ad_container_rendered', (event) => {
+    // Do something when a new ad container has been rendered
+  });
 ```
 
+For a complete listing of event subscriptions, refer to the api reference.
+
 Additional Information
 
 For more advanced use cases and component-specific documentation, refer to the official [Searchcraft React SDK documentation](https://docs.searchcraft.io/).

package/dist/index.d.ts

@@ -1,5 +1,14 @@
 import { Components } from '@searchcraft/javascript-sdk';
 import { FC } from 'react';
+import { SearchcraftConfig } from '@searchcraft/core';
+import { SearchcraftCore } from '@searchcraft/core';
+
+/**
+ * The consumer-facing Searchcraft class.
+ */
+export declare class Searchcraft extends SearchcraftCore {
+    constructor(config: SearchcraftConfig);
+}
 
 /**
  * A component that renders a list of search results with customizable styles, layout, and link behavior.