---

title: MyHistory

---

# MyHistory

The component renders the full history of user searched queries grouped by the day they were
performed.

## Props

| Name                          | Description                                                       | Type                       | Default           |
| ----------------------------- | ----------------------------------------------------------------- | -------------------------- | ----------------- |
| <code>animation</code>        | Animation component that will be used to animate the suggestions. | <code>AnimationProp</code> | <code>'ul'</code> |
| <code>locale</code>           | The current locale.                                               | <code>string</code>        | <code>'en'</code> |
| <code>queriesListClass</code> | Class inherited by content element.                               | <code>string</code>        | <code></code>     |

## Slots

| Name                                   | Description                         | Bindings<br />(name - type - description)                                                                                                                                                                                             |
| -------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>date</code>                      |                                     |                                                                                                                                                                                                                                       |
| <code>suggestion</code>                | History Query item                  | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index<br />**formatTime** <code>() => string</code> - Callback to format time to `hh:mm [PM/AM]` |
| <code>suggestion-content</code>        | History Query content               | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index<br />**formatTime** <code>() => string</code> - Callback to format time to `hh:mm [PM/AM]` |
| <code>suggestion-remove-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index                                                                                            |

## Events

This component doesn't emit events.

## See it in action

Here you have a basic example of how the MyHistory is rendered.

```vue
<template>
  <MyHistory />
</template>

<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';

  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    }
  };
</script>
```

### Play with props

In this example, the my history has been configured to use the 'es' locale.

```vue
<template>
  <MyHistory :locale="es" />
</template>

<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';

  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    }
  };
</script>
```

### Play with the animation

```vue
<template>
  <MyHistory :animation="fadeAndSlide" />
</template>

<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';
  import { FadeAndSlide } from '@empathyco/x-components';

  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    },
    data() {
      return {
        fadeAndSlide: FadeAndSlide
      };
    }
  };
</script>
```

### Play with suggestion slot

In this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the
`suggestion` slot (although any other component could potentially be passed).

```vue
<template>
  <MyHistory #suggestion="{ suggestion }">
    <HistoryQuery :suggestion="suggestion"></HistoryQuery>
  </MyHistory>
</template>

<script>
  import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';

  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory,
      HistoryQuery
    }
  };
</script>
```

### Play with suggestion-content slot

To continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is
passed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also
passed.

```vue
<template>
  <MyHistory #suggestion-content="{ suggestion }">
    <span>{{ suggestion.query }}</span>
  </MyHistory>
</template>

<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';

  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    }
  };
</script>
```

### Play with suggestion-content slot

In this example, an HTML span tag for the date are passed.

```vue
<template>
  <MyHistory #date="{ date }">
    <span>{{ date }}</span>
  </MyHistory>
</template>

<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';

  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    }
  };
</script>
```

### Play with suggestion-content-remove slot

To continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is
passed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the
icon to remove the history query.

```vue
<template>
  <MyHistory #suggestion-content-remove="{ suggestion }">
    <CrossIcon />
  </MyHistory>
</template>

<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';
  import { CrossIcon } from '@empathyco/x-components';

  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory,
      CrossIcon
    }
  };
</script>
```

### Customizing the items with classes

The `queriesListClass` prop can be used to add classes to the suggestions list.

```vue live
<template>
  <MyHistory #date="{ date }" queriesListClass="x-gap-16" />
</template>

<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';

  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    }
  };
</script>
```