BooleanFacet Example

App.jsx

import React from "react";
import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector";
import {
  Facet,
  SearchProvider,
  SearchBox,
  Results,
  PagingInfo,
  ResultsPerPage,
  Paging
} from "@elastic/react-search-ui";
import { Layout } from "@elastic/react-search-ui-views";
import "@elastic/react-search-ui-views/lib/styles/styles.css";

const connector = new AppSearchAPIConnector({
  searchKey: "search-soaewu2ye6uc45dr8mcd54v8",
  engineName: "national-parks-demo",
  hostIdentifier: "host-2376rb"
});

const BooleanFacet = ({ label, options, onChange, onRemove, values }) => {
  const trueCount = options.find(option => option.value === "true").count;
  const isSelected = values.includes("true");
  const isSelectedClass = isSelected ? "selected" : "";
  const apply = () => onChange("true");
  const remove = () => onRemove("true");
  return (
    <div className={isSelectedClass} onClick={apply}>
      {label}{" "}
      {!isSelectedClass ? `(${trueCount})` : <span onClick={remove}>X</span>}
    </div>
  );
};

export default function App() {
  return (
    <SearchProvider
      config={{
        apiConnector: connector,
        facets: {
          world_heritage_site: { type: "value" }
        }
      }}
    >
      {_ => (
        <div className="App">
          <Layout
            header={<SearchBox />}
            sideContent={
              <div>
                <Facet
                  field="world_heritage_site"
                  label="World Heritage Site"
                  view={BooleanFacet}
                />
              </div>
            }
            bodyContent={<Results titleField="title" urlField="nps_link" />}
            bodyHeader={
              <React.Fragment>
                <PagingInfo />
                <ResultsPerPage />
              </React.Fragment>
            }
            bodyFooter={<Paging />}
          />
        </div>
      )}
    </SearchProvider>
  );
}

latest.gif