fkhadra / fkhadra/react-toastify
Add a data attribute to ToastContainer
- Dominant language
- TypeScript
- Stars
- 13.4k
- Forks
- 741
- PR merge metrics
- No merged PRs in 30d
Description
## 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.
Contributor guide
Assessment
This issue has not been assessed yet.