> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/toast-service.md).

# Toast Service

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

## Installation

To install the `Quest react-sdk` into your project, follow these steps:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```jsx
npm install @questlabs/react-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

#### Toast Component Features

1. **Automatic Dismissal**: The `Toast` component automatically disappears after a specified duration, ensuring that it does not clutter the user interface.
2. **Customization**: You can customize the appearance and content of the toast message to suit your application's design and notification needs.
3. **User Interaction**: Users can click on the toast to dismiss it manually, providing them with control over notifications.

#### Toast Component Props

The `Toast` component accepts the following props:

* `message` (string, optional): The message to be displayed in the toast notification.
* `duration` (number, optional): The duration (in milliseconds) for which the toast remains visible before automatically disappearing. Defaults to 3000 milliseconds (3 seconds).

#### Toast Component Usage

To use the `Toast` component in your React application:

Import the component:

```
import { showToast } from '@questLabs/react-sdk';
```

Trigger a toast notification by calling the `showToast` function:

```
showToast(
  <div>
    <img src={streak} alt="" />
    Your custom message here
    <img src={xButton} alt="" />
  </div>,
  5000 // Duration in milliseconds
);
```

The Toast service can be used any where in your react app (also out side of react component function)