Add custom data attributes to Toasts

[pchr-srf]

Hi and thank you for react-toastify! Using it has been very straightforward so far 👍

Do you want to request a feature or report a bug? A feature

What is the current behavior? We can add ids and classes to the toasts, but no data attributes.

What is the expected behavior? We can additionally add data attributes to toasts, eg via

toast('🦄 Wow so easy!', {
  ...
  dataAttributes: {
    'data-cy': 'unicorn-toast'
  }
});

so that the resulting rendered toast has the provided data attributes

(obviously we're trying to test the toasts using Cypress und want to adhere to the best practices and use data-cy attributes instead of IDs or classes)

[Mominadar]

Hi, I would like to work on this. Can you assign it to me? @fkhadra

[mikey-gray]

Hi @pchr-srf 👋

Did you happen to find a work around for this? I'm trying to do the same, and confused the data prop as a way to do this. Only way I came up with was:

const CyWrapper = ({ text, cyId }) => <div data-cy={cyId}>{text}</div>;

// ...

toast(CyWrapper({ text, cyId }), options);

[pchr-srf]

Hey @mikey-gray Nope, apologies 😅 It would have been nice to verify that the correct toast was shown, but overall it was and still is a low priority for us. We check the returned data of the API calls which will result in different toasts, so the functionality is tested, just not the visual aspect of it. Your way seems a nice workaround, though!