AutomaticFacetGenerator
AutomaticFacetGenerator
This is for:
DeveloperExample 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>
);
};
The AutomaticFacetGenerator
headless controller offers a high-level interface for rendering automatic facets.
Unlike traditional 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 read more about the automatic facet generator feature, see: https://docs.coveo.com/en/n9sd0159/
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
-
automaticFacets:
AutomaticFacet[]
The list of automatic facet controllers.
Initialize
buildAutomaticFacetGenerator
Creates a AutomaticFacetGenerator
instance.
Parameters
-
engine:
SearchEngine
The headless engine.
-
props:
AutomaticFacetGeneratorProps
The automatic facets props.
Returns AutomaticFacetGenerator
AutomaticFacetGeneratorProps
The automatic facets props.
Properties
-
options:
AutomaticFacetGeneratorOptions
The options for the
AutomaticFacetGenerator
controller.
AutomaticFacetGeneratorOptions
The options for the AutomaticFacetGenerator
controller.
Properties
-
desiredCount?:
number
The desired count of automatic facets.
Minimum:
1
Maximum:10
Default:
5
-
numberOfValues?:
number
The desired number of automatically generated facet values.
Minimum:
1
Default:
8
Related Types
AutomaticFacet
Properties
-
state:
AutomaticFacetState
The state of the
AutomaticFacet
controller. -
deselectAll
: functionDeselects all automatic facet values.
-
toggleSelect
: functionToggles the specified automatic facet value.
Parameters
-
selection:
FacetValue
The facet value to toggle.
-
-
subscribe
: functionAdds 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