---

title: IdentifierResults

---

# IdentifierResults

Paints the list of identifier results stored in the state. Each identifier result should be
represented by a IdentifierResult component besides any other component.

## Props

| Name                          | Description                                                              | Type                       | Default           |
| ----------------------------- | ------------------------------------------------------------------------ | -------------------------- | ----------------- |
| <code>animation</code>        | Animation component that will be used to animate the identifier results. | <code>AnimationProp</code> | <code>'ul'</code> |
| <code>maxItemsToRender</code> | Number of identifier results to render.                                  | <code>number</code>        | <code></code>     |

## Slots

| Name                 | Description                                | Bindings<br />(name - type - description)                         |
| -------------------- | ------------------------------------------ | ----------------------------------------------------------------- |
| <code>default</code> | (Required) Identifier results item content | **identifierResult** <code>Result</code> - Identifier Result data |

## Examples

### Play with slot

A IdentifierResult **must** be used inside the IdentifierResults component. In the example below the
BaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult
component.

```vue
<IdentifierResults :animation="fadeAndSlide">
  <template #default="{ identifierResult }">
    <BaseResultLink :result="identifierResult">
      <template #default="{ result }">
        <IdentifierResult :result="result"/>
      </template>
    </BaseResultLink>
  </template>
</IdentifierResults>
```

### Play with props

In this example, the identifier results have been limited to render a maximum of 3 items.

```vue
<template>
  <IdentifierResults #default="{ identifierResult }" :maxItemsToRender="3">
    <IdentifierResult :result="identifierResult" />
  </IdentifierResults>
</template>

<script>
  import { IdentifierResults, IdentifierResult } from '@empathyco/x-components';

  export default {
    name: 'IdentifierResultsDemo',
    components: {
      IdentifierResults,
      IdentifierResult
    }
  };
</script>
```