fkhadra / fkhadra/react-toastify

Add a data attribute to ToastContainer

Open
#1,106 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.