---

title: FacetsProvider

---

# FacetsProvider

This component allows to provide facets by prop, to add them to the state of the
`Facets X-Module`. These facets will be added to the `Facets X-Module` state together with
the facets emitted by the `Search X-Module` through the SearchXEvents.FacetsChanged
event.

## Props

| Name                 | Description                                                                                                            | Type                 | Default                        |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------ |
| <code>groupId</code> | An facet group identifier to distinguish the provided facets from other facets like the<br />`Search X-Module` facets. | <code>GroupId</code> | <code>'provided-facets'</code> |
| <code>facets</code>  | The facets to provide to the `Facets X-Module` state. They have to include the<br />@empathyco/x-types#Filter.         | <code>Facet[]</code> | <code></code>                  |

## Events

A list of events that the component will emit:

- [`UserChangedSelectedFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user performed an action that changed the selected filters. The
  payload is the new list of selected filters.
- [`FacetsGroupProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after updating the facets prop with a new list of facets. The payload
  contains a Facets Group with the facets and the group id.

## Example

This component allows to provide facets by prop, to add them to the state of the `Facets X-Module`.
These facets will be added to the `Facets X-Module` state together with the facets emitted by the
`Search X-Module` through the `SearchXEvents.FacetsChanged` event.

```vue
<template>
  <FacetsProvider :facets="myFacets" />
</template>

<script>
import { FacetsProvider } from '@empathyco/x-components/facets'

export default {
  components: {
    FacetsProvider,
  },
  data() {
    return {
      myFacets: [
        {
          modelName: 'SimpleFacet',
          id: 'color-facet',
          label: 'Color',
          filters: [
            {
              modelName: 'SimpleFilter',
              id: 'color:red',
              facetId: 'color-facet',
              label: 'Red',
              selected: false,
              value: 'color:red',
              totalResults: 10,
            },
            {
              modelName: 'SimpleFilter',
              id: 'color:blue',
              facetId: 'color-facet',
              label: 'Blue',
              selected: false,
              value: 'color:blue',
              totalResults: 10,
            },
          ],
        },
      ],
    }
  },
}
</script>
```