You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Facet

A facet is a set of options used to filter a list of content items.

View source

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

Name	Type	Default	Description
`facet`required	`IFacet`		The attributes of this facet, see IFacet
`facetRows`required	`IFacet[]`		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 facet–the name of this facet
`clearFacetLabel`	`string`		Tooltip on the button to unselect all rows of this facet
`enableExclusions`	`boolean`		Wheter to display the exclusion or not
`excludeTooltipMessage`	`(facetsRowName: string) => string`		Function to format the tooltip on the exclusion button facetsRowName–the name of the facet that is being hovered
`filterPlaceholder`	`string`		The placerholder to display in the More values filter input
`isOpened`	`boolean`		Wheter the facet More dropdown is opened or not
`key`	`Key`
`maxRowsToShow`	`number`	`5`	Maximum number for facet rows to show
`maxTooltipLabelLength`	`number`		Display the label in a tooltip if the length is greater than this number
`moreLabel`	`string`		The label to display on the More values button
`onClearFacet`	`(facet: string) => void`		Callback function that runs when clicking on the unselect all button facet–the name of this facet
`onDestroy`	`(facet: string) => void`		Callback function that runs when this component unmounts facet–the name of this facet
`onRender`	`(facet: string) => void`		Callback function that runs when the component mounts facet–the name of this facet
`onToggleFacet`	`(facet: string, facetRow: IFacet) => void`		Callback function that runs when toggling a facet value facet–the name of the facet facetRow–the facet value being toggled
`ref`	`LegacyRef<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).
`selectedFacetRows`	`IFacet[]`		A list of selected facets, see IFacet
`toggleFacet`	`(facet: string, facetRow: IFacet) => void`		Callback function that runs when selecting or unselecting a facet row facet–the name of this facet facetRow–the name of the facet row being toggled
`withReduxState`	`boolean`	`true if using a connected component, false otherwise`	Wheter this component is connected to the state or not

Examples

Allow exclusion

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

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