Getting Started

# 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";

// This is a sample code for above example. 
 
// CSR
<UnbxdSearchCSRWrapper apiUrlConfig={{ headers: { "unbxd-user-id": "your-uid" }}} >
	<SearchBox />
	<Products />
</UnbxdSearchCSRWrapper>

// This is a sample code for above example. 
 
// SSR
const initialData = await initialize({
	apiKey: "your-api-key",
	siteKey: "your-site-key",
	apiUrlConfig: {
		headers: { "unbxd-user-id": "your-uid" },
	}
	
});
 
<UnbxdSearchSSRWrapper initialData={initialData}>
	<SearchBox />
	<Products />
</UnbxdSearchSSRWrapper>

// This is a sample code for above example. 
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>
	);
};

// This is a sample code for above example. 
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,
};

// Using the SearchBox component with debounce
<SearchBox debounce={true} delay={1000} />

// Using the useQuery hook with delay
const { query, setQuery } = useQuery({
	delay: 1000,
});

<UnbxdSearchCSRWrapper apiUrlConfig={{ headers: { "Unbxd-User-Id": "your-user-id" } }}>// Your components</UnbxdSearchCSRWrapper>

# 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"
	}
}

// This is a sample code for above example. 
 
// ✅ 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
>

// ❌ Wrong: Using components without wrapper
function SearchPage() {
	return <SearchBox />; // Will cause "Cannot read property" errors
}
 
// ✅ Correct: Wrap with wrapper component
function SearchPage() {
	return (
		<UnbxdSearchCSRWrapper siteKey="YOUR_SITE_KEY" apiKey="YOUR_API_KEY">
			<SearchBox />
		</UnbxdSearchCSRWrapper>
	);
}

// ❌ Wrong: Not checking for undefined
function ProductList() {
	const { products } = useProducts();
	return products.map((product) => <Product {...product} />);
}
 
// ✅ Correct: Add null checks
function ProductList() {
	const { products = [] } = useProducts();
	return products?.map((product) => <Product {...product} />);
}

// ✅ Correct: Provide initial data for SSR
export default function Page({ initialData }) {
	return (
		<UnbxdSearchSSRWrapper initialData={initialData}> // Prevents hydration errors
			<SearchResults />
		</UnbxdSearchSSRWrapper>
	);
}

const onEvent = (type, message, value, state) => {
	if (type === "API_ERROR") {
		// show fallback UI
	}
};
 
<UnbxdSearchCSRWrapper onEvent={onEvent}>// Your components</UnbxdSearchCSRWrapper>;