Allow arbitrary/custom props to be passed to modal (and rendered)

[WickyNilliams]

It would be useful if arbitrary props could be supplied to the Modal component, and be rendered to the DOM. A use case is adding data-* attributes for test hooks.

This was previously possible, but has since been removed. The original PR and some discussion can be found here: #230

[diasbruno]

That PR was not fully merged, but part of the code was integrated to make aria- attributes possible.

You can follow #442, if you want go give it a try and I'll be happy to merge this feature.

[kaushik94]

@diasbruno any specific reason to only fix this for aria-* attributes and not for data-* attributes? Because I would like to give a try at this if that's ok.

[diasbruno]

If I remember correctly, we had a PR that implemented both, but I had to slice it to get just the aria-* (which was important at the time).

@kaushik94 improvements are always welcome. 👍

[kaushik94]

@diasbruno oh ok just wanted to know the reason before writing the code for this. Sure, I will start working on it now and get back to you soon.

[renatoi]

Arbitrary props should be possible. Using an aria object is ok, but ideally I want the implementation to be as close to React as possible (I can pass aria-* and data-* attrs directly).

https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html

[Dobby89]

@diasbruno Any plans to make this possible? It's certainly needed.

[teetotum]

I started writing end-to-end tests with cypress and I really need react-modal to allow me to add data-test-id="my-foo-modal" to the modals for my tests.

[WickyNilliams]

@teetotum there's a testId prop which adds a data-testid attr. Are you able to select on this instead?

[teetotum]

Thanks for your fast answer. I looked into the code after I posted here and saw it. Yes I can use that when I upgrade (I'm still on version 3.5.1) but I also found out that we can use a data object like so:

<Modal data={ { 'test-id': 'my-foo-modal' } }   .../>