SearchInput

Purpose

The SearchInput component provides a simple way to search by terms while also handling special logic such as redirects.

Usage

Basic

import React from "react";
import { SearchInput } from "@usereactify/search";

export const Component: React.FC = () => {
  return (
    <SearchInput
      placeholder="Search for products..."
    />
  );
};

Props

type SearchInputProps = {
  /** Placeholder text that is shown when the input is empty (default: "Search for a product...") */
  placeholder?: string;

  /** Set the milliseconds to wait before sending a query, used to reduce queries on each key press (default: 300) */
  debounce?: number;

  /** Set the fuzziness setting for to allow for misspellings, specifies the allowed number of incorrect letters (default: 1)  */
  fuzziness?: 0 | 1 | 2 | "AUTO";

  /** Set if search terms should be AND or OR (default: "and")  */
  queryFormat?: "and" | "or";

  /** Enable a custom icon within the search input */
  showIcon?: boolean;

  /** Set the icon position when shoeIcon is enabled */
  iconPosition?: "left" | "right";

  /** Component that renders a custom icon to display */
  icon?: JSX.Element;

  /** Enable a clear icon to the right of the search input */
  showClear?: boolean;

  /** Component that renders a custom icon to clear the search input */
  clearIcon?: JSX.Element;

  /** Class name set on the div around the input field, used for custom styling */
  className?: string;

  /** Class name set on the html input field, used for custom styling */
  inputClassName?: string;

  [key: string]: any;
};