Search

Purpose

The Search component is a wrapper for the useSearch hook, it provides a simple way to access and update the search terms while also handling special logic such as redirects.

Usage

Basic

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

import { ExampleSearch } from "./ExampleSearch";

export const Component: React.FC = () => {
  return (
    <Search
      render={ExampleSearch}
    />
  );
};

ExampleSearch

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

export type ExampleSearchProps = React.ComponentProps<
  NonNullable<SearchProps["render"]>
>;

export const ExampleSearch: React.FC<ExampleSearchProps> = (props) => {
  const handleFormSubmit = React.useCallback(
    (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      props.submitSearchTerm();
    },
    [props.submitSearchTerm]
  );

  const handleInputChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      props.setSearchTerm(event.target.value);
    },
    [props.setSearchTerm]
  );

  return (
    <form onSubmit={handleFormSubmit}>
      <input
        type="search"
        placeholder="Search products..."
        value={props.searchTerm}
        onChange={handleInputChange}
      />
    </form>
  );
};

Props

type SearchProps = {
  /** Render method */
  render?: React.FC<ReturnType<typeof useSearch>>;
};