useVisualSearch

Overview

The useVisualSearch hook in the SDK is designed to manage and access the current image query state. It allows you to retrieve the current state and update it dynamically whenever necessary, providing an efficient way to handle image query-related operations in real-time.

Usage

import { useVisualSearch } from "@unbxd-ui/react-search-hooks";

⚠️

Note:

The useVisualSearch hook must be used within the wrapper (in CSR, SSR and Custom Hooks approaches) to ensure that the respective component(s) and the search functionality work properly.

Code Example

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { useVisualSearch } from "@unbxd-ui/react-search-hooks";
 
const VisualSearchComponent = () => {
	const { imageQuery, setImageQuery, boxes, selected, id, hotSpotClick, clearImage } = useVisualSearch();
 
	const onChange = (event) => {
		setImageQuery(event.target.value);
	};
 
	return (
		<input onChange={onChange} />
	);
};

Hook API

Return Values

imageQuery

string

This value represents the current image search query being used in the search.
Default value:

{ imageQuery: "", type: "URL", contentType: "" }

imageQuery:
type:
contentType:

setImageQuery

function

Updates the state with the provided image query.

boxes

array

API response array containing hotspot coordinates for object detection.

selected

number

The boxid from the response indicates the currently selected hotspot.

hotSpotClick

function

A function to select a specific hotspot.It sets the image according to the boxid passed.
Example Usage:

hotSpotClick(2345);

clearImage

function

Invoke this function to clear the current image data
Example Usage:

clearImage();

Use Cases

SearchBox

Summary

useBanner