Feature-request: Add a data attribute to ToastContainer
Description:
As part of improving the testability of react-toastify, I propose adding a data attribute to the ToastContainer component. This would allow us to easily target specific toasts in our E2E tests, making them more precise and efficient.
Benefits:
Easier toast selection: By using a data attribute, we can easily select specific toasts in our E2E tests using CSS selectors or other targeting methods.
Alignment with testing best practices: Adding a data attribute aligns with E2E testing best practices, which emphasize using unique identifiers to locate elements on the page.
Improved testability: Overall, adding a data attribute to ToastContainer will improve the testability of react-toastify, making it easier to write and maintain comprehensive E2E tests.
Implementation:
There are two main approaches to implementing this feature:
Add a new prop to ToastContainer: This is the simplest approach. We can add a new prop called dataAttribute to ToastContainer that allows users to specify their own data attribute for toasts.
Use the useToast hook: The useToast hook in react-toastify allows us to create toasts programmatically. We can modify this hook to add a dataAttribute prop that allows users to specify the data attribute for the toast they are creating.
Considerations:
If we add a new prop to ToastContainer, we need to ensure that it is properly documented and that it does not break existing usage.
We also need to consider how this change will interact with the existing ToastContainer API.
If we use the useToast hook approach, we need to make sure that all toasts created using the hook have the expected data attribute.
Call to action:
I would love to discuss this proposal further with the react-toastify team and get your feedback on the best way to implement it. I am also happy to contribute code if needed.
Feature-request: Add a data attribute to ToastContainer
Description:
As part of improving the testability of react-toastify, I propose adding a data attribute to the ToastContainer component. This would allow us to easily target specific toasts in our E2E tests, making them more precise and efficient.
Benefits:
Implementation:
There are two main approaches to implementing this feature:
Add a new prop to ToastContainer: This is the simplest approach. We can add a new prop called
dataAttributeto ToastContainer that allows users to specify their own data attribute for toasts.Use the
useToasthook: TheuseToasthook in react-toastify allows us to create toasts programmatically. We can modify this hook to add adataAttributeprop that allows users to specify the data attribute for the toast they are creating.Considerations:
useToasthook approach, we need to make sure that all toasts created using the hook have the expected data attribute.Call to action:
I would love to discuss this proposal further with the react-toastify team and get your feedback on the best way to implement it. I am also happy to contribute code if needed.