Skip to content

Conversation

@dana-y
Copy link
Contributor

@dana-y dana-y commented Oct 15, 2025

Summary

This PR adds a globalLimit prop to the <Toasts /> component, allowing developers to control the maximum number of toasts displayed per provider instance.

Motivation

First of all, I want to say that I've been using this library extensively and it's been fantastic! 🎉

Currently, the toast limit is hardcoded at 20 toasts in the store. While this works well for most cases, there are scenarios where different providers might need different limits:

  • A modal might need to show only 1-3 toasts at a time
  • The main screen might want to display more toasts
  • Different UX requirements across the app

Changes

Core Changes

  • types.ts: Added limit?: number to DefaultToastOptions type
  • store.ts: Modified useStore to respect the limit option when filtering toasts
    • Moved limit logic from reducer to the view layer (filter + slice)
    • Each provider can now have an independent limit
    • Default remains 20 toasts if not specified
  • Toasts.tsx: Added globalLimit?: number prop that gets passed to useToaster

Example Updates

  • Updated example app to demonstrate usage:
    • Root level: globalLimit={5}
    • Modal level: globalLimit={3}

API

<Toasts 
  globalLimit={5}  // Optional, defaults to 20
  // ... other props
/>

This follows the existing pattern of globalAnimationType and globalAnimationConfig props.


I'm happy to make any changes or adjustments you'd like to see. Thank you for maintaining such a great library! 🙏

@nickdebaise
Copy link
Member

Thank you for your PR! I will be reviewing this alongside other global props that I would like to add as well (a global position prop and a global duration prop)

@nickdebaise
Copy link
Member

Thanks for the PR! @dana-y. I've just released 0.15.0. I would like to release this change in 0.15.1. I've merged 0.15.0 into your branch. Before I merge, can you please add a test in __tests__/src/components/Toasts.test.tsx and add a brief example in our example app please? For the example app, please add a way to change the global limit in a text input and then use that globalLimit in the root component. Once you do this, I'll give it the green light and merge it in!

@dana-y
Copy link
Contributor Author

dana-y commented Oct 22, 2025

@nickdebaise Thank you for your kind reply! 🤗
I've added the unit test you requested to the file located at __tests__/src/components/Toasts.test.tsx. Could you please take a look at it?

aba907f

@nickdebaise nickdebaise changed the base branch from master to feat/0.15.1 November 2, 2025 22:21
@nickdebaise nickdebaise merged commit 71056f7 into backpackapp-io:feat/0.15.1 Nov 2, 2025
1 check passed
nickdebaise added a commit that referenced this pull request Nov 2, 2025
* docs: add Korean translation (README-ko.md) and language switch links (#77)

* docs: add Korean translation for README

* docs: add language switch links to README and README-ko.md
- Added English ↔ Korean navigation links at the top of both files
- Helps users easily switch between README.md and README-ko.md

* fix: web support (#78)

* fix: web support

* fix: fix interactivity on mobile, add param for screen reader, update docs

---------

Co-authored-by: Nick DeBaise <nickdebaise@gmail.com>

* feat: Add globalLimit prop to control maximum visible toasts per provider (#76)

* feat: add globalLimit option to control the maximum number of toasts displayed

* Use optional chaining for toastOptions.limit

* fix: fix up merge conflict. Note-to-self: Do not use Github web UI for merginggit add

* feat: add unit test for toast limit functionality based on globalLimit prop

* fix: update toast dismissal method in tests from dismiss() to remove() for consistency

---------

Co-authored-by: Nick DeBaise <nickdebaise@gmail.com>

---------

Co-authored-by: Suin Kim <contact@suinkim.me>
Co-authored-by: Micael Dias <me@micaeldias.dev>
Co-authored-by: daeun.yang <75559282+dana-y@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants