AutomaticFacetGenerator

This is for:

Developer

Example Implementation

automatic-facet-generator.fn.tsx

import {AutomaticFacetGenerator as HeadlessAutomaticFacetGenerator} from '@coveo/headless';
import {FunctionComponent, useEffect, useState} from 'react';
import {AutomaticFacet as AutomaticFacetFn} from '../automatic-facet/automatic-facet.fn';
 
interface AutomaticFacetGeneratorProps {
  controller: HeadlessAutomaticFacetGenerator;
}
 
export const AutomaticFacetGenerator: FunctionComponent<
  AutomaticFacetGeneratorProps
> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  const automaticFacets = state.automaticFacets.map((facet) => {
    return (
      <AutomaticFacetFn
        key={facet.state.field}
        controller={facet}
      ></AutomaticFacetFn>
    );
  });
  return <div>{automaticFacets}</div>;
};
 
// usage
 
/**
 * ```tsx
 * const options: AutomaticFacetGeneratorOptions = {desiredCount: 5, numberOfValues: 6}
 * const controller = buildAutomaticFacetGenerator(engine, {options});
 *
 * <AutomaticFacetGenerator controller={controller} />;
 * ```
 */

automatic-facet.fn.tsx

import {AutomaticFacet as HeadlessAutomaticFacet} from '@coveo/headless';
import {FunctionComponent, useEffect, useState} from 'react';
 
interface AutomaticFacetProps {
  controller: HeadlessAutomaticFacet;
}
 
export const AutomaticFacet: FunctionComponent<AutomaticFacetProps> = (
  props
) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  return (
    <ul>
      {state.values.map((value) => (
        <li key={value.value}>
          <input
            type="checkbox"
            checked={value.state === 'selected'}
            onChange={() => controller.toggleSelect(value)}
          />
          {value.value} ({value.numberOfResults} results)
        </li>
      ))}
    </ul>
  );
};
 
// usage
 
/**
 * This component is meant to be used inside the `AutomaticFacetGenerator` component.
 */

The AutomaticFacetGenerator headless controller offers a high-level interface for rendering automatic facets.

Unlike regular facets that need to be explicitly defined and requested in the query, automatic facets are dynamically generated by the index in response to the query.

To learn more about the automatic facet generator feature, see: About the Facet Generator.

Methods

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

The state of the AutomaticFacetGenerator controller.

Properties

Initialize

buildAutomaticFacetGenerator

Creates a AutomaticFacetGenerator instance.

Parameters

Returns AutomaticFacetGenerator

AutomaticFacetGeneratorProps

The automatic facets props.

Properties

AutomaticFacetGeneratorOptions

The options for the AutomaticFacetGenerator controller.

Properties

  • desiredCount?: number

    The desired count of automatic facets.

    Minimum: 1 Maximum: 20

    Default: 5

  • numberOfValues?: number

    The desired number of automatically generated facet values.

    Minimum: 1

    Default: 8

Sub-controllers

AutomaticFacet

Properties

  • state: AutomaticFacetState

    The state of the AutomaticFacet controller.

  • deselectAll: function

    Deselects all automatic facet values.

  • toggleSelect: function

    Toggles the specified automatic facet value.

    Parameters

    • selection: FacetValue

      The facet value to toggle.

  • subscribe: function

    Adds a callback that’s invoked on state change.

    Parameters

    • listener: () ⇒ void

      A callback that’s invoked on state change.

      Returns Unsubscribe: A function to remove the listener.

AutomaticFacetState

Properties

  • field: string

    The automatic facet field.

  • label: string

    The automatic facet label.

  • values: FacetValue[]

    The automatic facet values.

FacetValue

Properties

  • numberOfResults: number

    The number of results that have the facet value.

  • state: 'idle' | 'selected' | 'excluded'

    Whether a facet value is filtering results (selected) or not (idle).

  • value: string

    The facet value.

Unsubscribe

Call signatures

  • (): void;