Form

Facet

A facet is a set of options used to filter a list of content items.
Simple Facet
1
import {FacetConnected, IFacet} from '@coveord/plasma-react';
2
3
const Demo = () => {
4
const facet: IFacet = {name: 'facet-1', formattedName: 'Simple Facet'};
5
6
const facetRows: IFacet[] = [
7
{
8
name: 'row1',
9
formattedName: 'Row 1',
10
},
11
{
12
name: 'row2',
13
formattedName: 'The second row',
14
},
15
{
16
name: 'row3',
17
formattedName: 'Third row with a count property',
18
count: '23412',
19
},
20
];
21
return <FacetConnected facet={facet} facetRows={facetRows} />;
22
};
23
export default Demo;

Props

NameTypeDefaultDescription
facetrequiredIFacet
The attributes of this facet, see IFacet
facetRowsrequiredIFacet[]
A list of IFacet representing all the possible values of this facet
clearFacet(facet: string) => void
Callback function that runs when clicking on the unselect all rows button
  • facetthe name of this facet
clearFacetLabelstring
Tooltip on the button to unselect all rows of this facet
enableExclusionsboolean
Wheter to display the exclusion or not
excludeTooltipMessage(facetsRowName: string) => string
Function to format the tooltip on the exclusion button
  • facetsRowNamethe name of the facet that is being hovered
filterPlaceholderstring
The placerholder to display in the More values filter input
isOpenedboolean
Wheter the facet More dropdown is opened or not
keyKey
maxRowsToShownumber5
Maximum number for facet rows to show
maxTooltipLabelLengthnumber
Display the label in a tooltip if the length is greater than this number
moreLabelstring
The label to display on the More values button
onClearFacet(facet: string) => void
Callback function that runs when clicking on the unselect all button
  • facetthe name of this facet
onDestroy(facet: string) => void
Callback function that runs when this component unmounts
  • facetthe name of this facet
onRender(facet: string) => void
Callback function that runs when the component mounts
  • facetthe name of this facet
onToggleFacet(facet: string, facetRow: IFacet) => void
Callback function that runs when toggling a facet value
  • facetthe name of the facet
  • facetRowthe facet value being toggled
refLegacyRef<Facet>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
selectedFacetRowsIFacet[]
A list of selected facets, see IFacet
toggleFacet(facet: string, facetRow: IFacet) => void
Callback function that runs when selecting or unselecting a facet row
  • facetthe name of this facet
  • facetRowthe name of the facet row being toggled
withReduxStatebooleantrue if using a connected component, false otherwise
Wheter this component is connected to the state or not

Examples

Allow exclusion
Facet with exclude
1
import {FacetConnected, IFacet} from '@coveord/plasma-react';
2
3
const Demo = () => {
4
const facet: IFacet = {name: 'facet-2', formattedName: 'Facet with exclude'};
5
6
const facetRows: IFacet[] = [
7
{
8
name: 'row1',
9
formattedName: 'Row 1',
10
},
11
{
12
name: 'row2',
13
formattedName: 'The second row',
14
},
15
];
16
return <FacetConnected facet={facet} facetRows={facetRows} enableExclusions />;
17
};
18
export default Demo;
Show more
Facet with more
1
import {FacetConnected, IFacet} from '@coveord/plasma-react';
2
3
const Demo = () => {
4
const facet: IFacet = {name: 'facet-3', formattedName: 'Facet with more'};
5
6
const facetRows: IFacet[] = [
7
{
8
name: 'row1',
9
formattedName: 'The first row',
10
},
11
{
12
name: 'row2',
13
formattedName: 'The second row',
14
},
15
{
16
name: 'row3',
17
formattedName: 'The third row',
18
},
19
{
20
name: 'row4',
21
formattedName: 'The fourth row',
22
},
23
];
24
return <FacetConnected facet={facet} facetRows={facetRows} maxRowsToShow={2} />;
25
};
26
export default Demo;

No guidelines exist for Facet yet.

Create guidelines