React Toast Notification Implementation

Creating toast notifications is a common UI pattern for providing temporary feedback to users, such as success messages, warnings, or errors. This challenge asks you to implement a reusable toast notification component in React using TypeScript, allowing for customizable messages, types (success, warning, error), and durations. This will enhance your understanding of React component design, state management, and styling.

Problem Description

You need to build a Toast component that displays a notification message to the user. The component should accept the following props:

• message: (string) The text content of the toast notification. This is required.
• type: (string, optional) The type of the toast notification. Possible values are "success", "warning", or "error". Defaults to "info" if not provided.
• duration: (number, optional) The duration in milliseconds that the toast should be displayed. Defaults to 3000ms (3 seconds).
• onClose: (function, optional) A callback function to be executed when the toast is closed (either manually by the user or after the duration expires).

The component should:

1. Display the provided message and type in a visually distinct manner (e.g., using different background colors for different types).
2. Automatically disappear after the specified duration.
3. Provide a close button ("X") that allows the user to manually dismiss the toast.
4. Call the onClose callback when the toast is closed, regardless of whether it was closed automatically or manually.
5. Position the toast notification at the top of the viewport.

Expected Behavior:

• When a Toast component is rendered, the message and type should be displayed immediately.
• After the specified duration, the toast should smoothly fade out and disappear.
• Clicking the close button should immediately dismiss the toast and trigger the onClose callback.
• The toast should be visually distinct based on its type.

Edge Cases to Consider:

• What happens if duration is 0? The toast should disappear immediately.
• What happens if message is an empty string? Display an empty toast or handle it gracefully.
• Consider accessibility: Ensure the toast is accessible to users with disabilities (e.g., using appropriate ARIA attributes).

Examples

Example 1:

Input: <Toast message="Success! Operation completed." type="success" duration={2000} onClose={() => console.log("Toast closed successfully!")} />
Output: A green toast notification displaying "Success! Operation completed." that disappears after 2 seconds and logs "Toast closed successfully!" to the console.
Explanation: The component renders with a success message, a 2-second duration, and a callback function.

Example 2:

Input: <Toast message="Warning: Low disk space." type="warning" />
Output: A yellow toast notification displaying "Warning: Low disk space." that disappears after 3 seconds (default duration) and does not have an onClose callback.
Explanation: The component renders with a warning message, using the default duration and no callback.

Example 3:

Input: <Toast message="Error: Could not connect." type="error" duration={0} onClose={() => console.log("Error toast closed.")} />
Output: A red toast notification displaying "Error: Could not connect." that disappears immediately and logs "Error toast closed." to the console.
Explanation: The component renders with an error message, a 0-second duration, and a callback function.

Constraints

• The component should be implemented using functional components and React hooks.
• Styling can be done using CSS, styled-components, or any other CSS-in-JS library. Keep styling simple and focused on the core functionality.
• The toast should be positioned at the top of the viewport without overlapping other content.
• The fade-out animation should be smooth and visually appealing.
• The component should be reusable and easily customizable.

Notes

• Consider using setTimeout to handle the automatic dismissal of the toast.
• Use state to manage the visibility of the toast.
• Think about how to handle the onClose callback effectively.
• Focus on creating a clean, well-structured, and maintainable component.
• Accessibility is important - consider ARIA attributes for screen readers.