Getting Started

import { UnbxdSearchCSRWrapper, useProducts, useQuery } from "@unbxd-ui/react-search-hooks";
 
const Products = () => {
	const { products } = useProducts();
	return (
		<div className="products-container">
			{products.map((product) => (
				<div key={product.id} className="product-card">
					<img src={product.image} alt={product.name} />
					<div className="product-name">{product.name}</div>
					<div className="product-price">{product.price}</div>
				</div>
			))}
		</div>
	);
};
 
const SearchBox = () => {
	const { query, setQuery } = useQuery({ delay: 0, forceReload: false });
	return <input type="text" placeholder="Search products..." className="search-box" value={query} onChange={(e) => setQuery(e.target.value)} />;
};
 
const App = () => {
	return (
		<UnbxdSearchCSRWrapper>
			<SearchBox />
			<Products />
		</UnbxdSearchCSRWrapper>
	);
};

// CSR
<UnbxdSearchCSRWrapper headers={{ "unbxd-user-id": "your-uid" }}>
	<SearchBox />
	<Products />
</UnbxdSearchCSRWrapper>

// SSR
 

# Complete solution (components + hooks)
npm install @unbxd-ui/react-search-components @unbxd-ui/react-search-hooks
 
# Hooks-only (for custom UI implementation)
npm install @unbxd-ui/react-search-hooks
 
# Using Yarn
yarn add @unbxd-ui/react-search-components @unbxd-ui/react-search-hooks
 
# Using pnpm
pnpm add @unbxd-ui/react-search-components @unbxd-ui/react-search-hooks

// Client-Side Rendering (CSR)
// Using pre-built components
import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-hooks";
import { SearchBox, Products } from "@unbxd-ui/react-search-components";
 
// Custom implementation with hooks
import { UnbxdSearchCSRWrapper, useProducts, useQuery } from "@unbxd-ui/react-search-hooks";

// Server-Side Rendering (SSR)
// Using pre-built components
import { UnbxdSearchSSRWrapper } from "@unbxd-ui/react-search-hooks";
import { SearchBox, Products } from "@unbxd-ui/react-search-components";
 
// Custom implementation with hooks
import { UnbxdSearchSSRWrapper, useProducts, useQuery } from "@unbxd-ui/react-search-hooks";

import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-hooks";
import { SearchBox, Products } from "@unbxd-ui/react-search-components";
 
// Type definitions for wrapper configuration
interface UnbxdSearchCSRWrapperProps {
	siteKey: string;
	apiKey: string;
	defaultValues?: {
		query?: string;
		pageSize?: number;
	};
	// Additional configuration options
}
 
// Type definitions for component props
interface SearchBoxProps {
	placeholder?: string;
	showSubmitButton?: boolean;
	// Additional component options
}
 
// Example implementation with TypeScript
const config: UnbxdSearchCSRWrapperProps = {
	apiKey: "your-api-key",
	siteKey: "your-site-key",
	defaultValues: {
		query: "*",
		pageSize: 20,
	},
};
 
const searchBoxProps: SearchBoxProps = {
	placeholder: "Search products...",
	showSubmitButton: true,
};

# 1. Check your current React version
npm list react
 
# 2. Install compatible versions
npm install react@18.2.0 react-dom@18.2.0
 
# 3. If needed, use legacy peer deps flag
npm install --legacy-peer-deps

{
	"resolutions": {
		"react": "18.2.0",
		"react-dom": "18.2.0"
	}
}

npm list react react-dom

npm install react@^18.2.0 react-dom@^18.2.0

{
	"overrides": {
		"react": "^18.2.0",
		"react-dom": "^18.2.0"
	}
}

{
	"resolutions": {
		"react": "^18.2.0",
		"react-dom": "^18.2.0"
	}
}

// ❌ Avoid importing entire library
import * as Components from "@unbxd-ui/react-search-components";
 
// ✅ Import only needed components
import { SearchBox, Products } from "@unbxd-ui/react-search-components";

// ✅ Lazy load components
const Facets = lazy(() =>
	import("@unbxd-ui/react-search-components").then((module) => ({
		default: module.Facets,
	}))
);
 
function SearchPage() {
	const [showFacets, setShowFacets] = useState(false);
 
	return (
		<div>
			<SearchBox />
			<Products />
			{showFacets && (
				<Suspense fallback={<div>Loading filters...</div>}>
					<Facets />
				</Suspense>
			)}
		</div>
	);
}

# Install and run bundle analyzer
npm install --save-dev webpack-bundle-analyzer
npx webpack-bundle-analyzer build/static/js/*.js

// webpack.config.js
module.exports = {
	optimization: {
		usedExports: true,
		sideEffects: false,
	},
};

// Ensure correct imports
import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-hooks";
import { SearchBox, Products } from "@unbxd-ui/react-search-components";

// Verify API credentials and configuration
const SearchImplementation = () => (
	<UnbxdSearchCSRWrapper
		apiKey="your-valid-api-key"
		siteKey="your-valid-site-key"
		defaultValues={{
			query: "*", // Default search query
		}}>
		<SearchBox />
		<Products />
	</UnbxdSearchCSRWrapper>
);

// Add event monitoring
const onEvent = (event, message, value, state) => {
    console.log({
        event,
        message,
        value,
        state
    });
};
 
<UnbxdSearchCSRWrapper
    onEvent={onEvent}
    // ... other props
>

// ❌ Incorrect placement
function App() {
	return (
		<div>
			<SearchBox /> {/* Won't work outside wrapper */}
			<UnbxdSearchCSRWrapper>
				<Products />
			</UnbxdSearchCSRWrapper>
		</div>
	);
}
 
// ✅ Correct placement
function App() {
	return (
		<UnbxdSearchCSRWrapper>
			<SearchBox />
			<Products />
		</UnbxdSearchCSRWrapper>
	);
}