Check out this Storybook to visualize and test this component.

The <StandardFacet /> component can only be used within the <Facets /> parent component and allows users to single-out a specified facet in order to edit it.

For more information on facets, check out the Facets and Filters unit as well as the Facets component documentation.

Basic Example

To make a field eligible as a facet, we need to make sure it's set as a facet in the searchableFields attribute in the search configuration. This exposes the field in the API response and allows facets to be applied on that field. For example:

{
  "verticals": {
    "products": {
      "entityTypes": ["product"],
      "searchableFields": {
        "c_color": {
          "facet": true
        },
        "c_size": {
          "facet": true
        }
      }
    }
  }
}

Once that's done, you can use the <StandardFacet /> component within the <Facets /> parent component. The main reason you'd want to do this is if you want to override the default properties for an individual facet but not the others.

import { useSearchActions } from "@yext/search-headless-react";
import {
  SearchBar,
  StandardCard,
  VerticalResults,
  Facets,
  StandardFacet,
} from "@yext/search-ui-react";
import { useEffect } from "react";

function App() {
  const searchActions = useSearchActions();

  useEffect(() => {
    searchActions.setVertical("products");
  }, []);

  return (
    <div className="flex justify-center px-4 py-6">
      <div className="w-full max-w-5xl">
        <SearchBar />
        <div className="flex">
          <div>
            <Facets>
              <StandardFacet
                fieldId="c_size"
                defaultExpanded={false}
                label={"Dimensions"}
              />
            </Facets>
          </div>
          <VerticalResults CardComponent={StandardCard} />
        </div>
      </div>
    </div>
  );
}

export default App;

In the above example, we override the defaultExpanded and label properties only for the size facet.

Transforming Facet Options

The <StandardFacet /> component also exposes a prop to transform the facet options. You might use this prop if you wanted to change the display order of the options, or add/remove a prefix to the option names.

Here's an example where we sort the options to display in alphabetical order using the transformOptions prop:

<Facets>
  <StandardFacet
    fieldId="color"
    transformOptions={(options: DisplayableFacet["options"]) =>
      [...options].sort((a, b) =>
        a.displayName.localeCompare(b.displayName)
      )
    }
  />
</Facets>

Customizations

Like the rest of our components, you can customize the elements of the Standard Facet using the customCssClasses prop.

Component API

Check out the component properties in the Search UI React Github repo.