Toast Service

The Toast component is a React functional component responsible for displaying notifications to users in a non-intrusive and visually appealing manner.

To unlock early access to the component Get Access

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:

npm install @questlabs/react-sdk

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

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

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)