@empathyco/x-components/docs/API-reference/components/common/result/x-components.base-result-rating.md

Empathy X Components

---

title: BaseResultRating

---

# BaseResultRating

This component renders a BaseRating for a result passed as prop.

## Props

| Name                | Description                                         | Type                | Default       |
| ------------------- | --------------------------------------------------- | ------------------- | ------------- |
| <code>result</code> | The @empathyco/x-types#Result to render its rating. | <code>Result</code> | <code></code> |
| <code>link</code>   | A link to redirect when rating is clicked.          | <code>string</code> | <code></code> |

## Slots

| Name                     | Description                          | Bindings<br />(name - type - description) |
| ------------------------ | ------------------------------------ | ----------------------------------------- |
| <code>default</code>     | To override the whole content        | <br />                                    |
| <code>empty-icon</code>  | The content to render as empty icon  | None                                      |
| <code>filled-icon</code> | The content to render as filled icon | None                                      |

## Events

This component emits the following events:

- [`UserClickedAResultRating`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

## See it in action

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

```vue
<template>
  <BaseResultRating :result="result" />
</template>

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

export default {
  name: 'ResultRatingDemo',
  components: {
    BaseResultRating,
  },
  data() {
    return {
      result: {
        id: 1,
        name: 'Result with rating',
        rating: { value: 3 },
      },
    }
  },
}
</script>
```

### Play with props

In this example, the result rating has been configured to 6 as maximum value using the prop `max`.

```vue
<template>
  <BaseResultRating :result="result" :max="6" />
</template>

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

export default {
  name: 'ResultRatingDemo',
  components: {
    BaseResultRating,
  },
  data() {
    return {
      result: {
        id: 1,
        name: 'Result with rating',
        rating: { value: 3 },
      },
    }
  },
}
</script>
```

In this example, the result rating has been configured with a link to redirect when is clicked.

```vue
<template>
  <BaseResultRating :result="result" link="https://empathy.co/" />
</template>

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

export default {
  name: 'ResultRatingDemo',
  components: {
    BaseResultRating,
  },
  data() {
    return {
      result: {
        id: 1,
        name: 'Result with rating',
        rating: { value: 3 },
      },
    }
  },
}
</script>
```

### Play with events

In this example, a message has been added to be shown when the result rating is clicked.

```vue
<template>
  <BaseResultRating :result="result" @UserClickedAResultRating="logUserClickedRating" />
</template>

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

export default {
  name: 'ResultRatingDemo',
  components: {
    BaseResultRating,
  },
  data() {
    return {
      result: {
        id: 1,
        name: 'Result with rating',
        rating: { value: 3 },
      },
    }
  },
  methods: {
    logUserClickedRating(result) {
      console.log('User clickedRating of this result:', result)
    },
  },
}
</script>
```

## Extending the component

The rendered icons for rating can be configured through slots. Keep in mind that the icons for both
states (filled and empty), must have the same size make component work properly.

```vue
<template>
  <BaseResultRating :result="result">
    <template #filled-icon>❤️</template>
    <template #empty-icon>🤍</template>
  </BaseResultRating>
</template>

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

export default {
  name: 'ResultRatingDemo',
  components: {
    BaseResultRating,
  },
  data() {
    return {
      result: {
        id: 1,
        name: 'Result with rating',
        rating: { value: 3 },
      },
    }
  },
}
</script>
```

It is possible to override all the content of the component to show your own rating but keeping the
link and event behaviour:

```vue
<template>
  <BaseResultRating :result="result" #default="{ rating, result }">
    <span v-for="star in rating">⭐️</span>
    <span>{{ result.name }}</span>
  </BaseResultRating>
</template>

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

export default {
  name: 'ResultRatingDemo',
  components: {
    BaseResultRating,
  },
  data() {
    return {
      result: {
        id: 1,
        name: 'Result with rating',
        rating: { value: 3 },
      },
    }
  },
}
</script>
```

Even it is possible to reuse our rating component:

```vue
<template>
  <BaseResultRating :result="result" #default="{ rating, result }">
    <BaseRating :value="rating" />
    <span>{{ result.name }}</span>
  </BaseResultRating>
</template>

<script>
import { BaseResultRating, BaseRating } from '@empathyco/x-components'

export default {
  name: 'ResultRatingDemo',
  components: {
    BaseResultRating,
    BaseRating,
  },
  data() {
    return {
      result: {
        id: 1,
        name: 'Result with rating',
        rating: { value: 3 },
      },
    }
  },
}
</script>
```