emilkowalski / sonner

An opinionated toast component for React.

Home Page:https://sonner.emilkowal.ski

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Enhancement Request: Scrollable Sonner

mardausdennis opened this issue · comments

I've run into cases where having a scrollable toast area would really improve usability, especially on smaller screens where toasts can overflow.

Feature Request

It would be great to have a scrollable toast notification area as a feature. This would be super useful when there are more toasts than can fit on the screen, letting users scroll to see all active toasts without missing any important ones.

Implementation Suggestions

  • Scrollable Toast Container: Make the toast area scrollable when toasts exceed available space
  • Customizable Scroll Options: Allow customizing scroll behavior (max height before enabling, scroll speed, etc)
  • Responsive Design: Make sure scrolling works well, is usable across device sizes and mobile
  • Accessibility: Include keyboard navigation, etc

Use Case

This would help in situations where lots of toasts get generated quickly, like during busy times in a monitoring app. The scrollable area prevents the screen from getting overloaded and toasts getting hidden.

Potential Challenges

  • Smooth scrolling without interfering with toast functions
  • Balancing visibility duration and scrollability

I think this would really improve the UX when toast overflow happens, especially on smaller screens. It makes sure users don't miss notifications due to limited space. Let me know if you have any other thoughts!

This won't be added unfortunately, all toasts are positioned absolutely and it would be very time-consuming to make them scrollable. It's also an edge case that rarely happens.