Suggestions

Purpose

The Suggestions component is used to display a list of "did you mean" style suggestions within an instant search or similar area.

Usage

Basic

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

import { ExampleSuggestions } from "./ExampleSuggestions";

export const Component: React.FC = () => {
  return (
    <Suggestions
      field="title"
      render={ExampleSuggestions}
    />
  );
};

ExampleSuggestions

import React from "react";

import { SuggestionsProps, useSearch } from "@usereactify/search";

export type ExampleSuggestionsProps = React.ComponentProps<
  NonNullable<SuggestionsProps["render"]>
>;

export const ExampleSuggestions: React.FC<ExampleSuggestionsProps> = (
  props
) => {
  const { setSearchTerm } = useSearch();

  return (
    <>
      <h3>Suggestions</h3>
      <ul>
        {props.suggestions.map((suggestion) => (
          <li onClick={() => setSearchTerm(suggestion.text)}>
            {suggestion.text}
          </li>
        ))}
      </ul>
    </>
  );
};

Props

type SuggestionsProps = {
  /** The field which should be used for suggestions */
  field: "title";
  /** Render method */
  render?: React.FC<{
    suggestions: Array<{
      text: string;
    }>;
  }>;
};