Add a data attribute to ToastContainer

[Miladxsar23]

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:

1. 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.

2. 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.