@empathyco/x-components
Version:
Empathy X Components
101 lines (77 loc) • 3.31 kB
Markdown
---
title: Redirection
---
# Redirection
A redirection is a component that sends the user to a link in the website. It is helpful when
there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the
website will be more helpful than the set of results returned.
## Props
| Name | Description | Type | Default |
| --------------------------- | ----------------------------------------------------------------------------------- | ------------------- | ------------------- |
| <code>mode</code> | The redirection mode. Auto for auto redirection and manual for an user interaction. | <code>string</code> | <code>'auto'</code> |
| <code>delayInSeconds</code> | The waiting time in seconds until the redirection is made. | <code>number</code> | <code>0</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> | | <br /><br /><br /><br /> |
## Events
This component emits the following events:
- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
after the user clicks the redirection button.
- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
after the user clicks the abort redirection button.
## Play with the component
In this example, a query has been searched in the search input resulting in a case where the
response has a redirection.
A text box appears bellow the search box indicating that you're going to be redirected to another
web page.
This component has two modes:
- Auto mode means that the redirection will occur after a certain number of seconds passed as a
property.
- If the value is 0 the redirection will be instantly.
- Manual mode means that the user have to click the redirect button or nothing will happen.
_Type any term in the input field to try it out!_
```vue
<template>
<Redirection #default="{ redirection, redirect, abortRedirect }">
<span>In a few seconds you're going to be redirected!</span>
<span>{{ redirection.url }}</span>
<button @click="redirection">Redirect now!</button>
<button @click="abortRedirect">Abort redirection!</button>
</Redirection>
</template>
<script>
import { Redirection } from '@empathyco/x-components/search'
export default {
name: 'RedirectionDemo',
components: {
Redirection,
},
}
</script>
```
## Extending the component
Components behaviour can be changed, in this example the mode of the component will be manual
forcing the user to accept the redirection
```vue
<template>
<Redirection #default="{ redirection, redirect }">
<span>{{ redirection.url }}</span>
<button @click="redirect">Redirect now!</button>
</Redirection>
</template>
<script>
import { Redirection } from '@empathyco/x-components/search'
export default {
name: 'RedirectionDemo',
components: {
Redirection,
},
data() {
return {
mode: 'manual',
}
},
}
</script>
```