In my ReactJS app, I use SCSS modules and hashed class names that change with each deploy, resulting in something like this:
Header_mobileMenuToggle__6n6-W
I want to integrate a third party no-code tool that uses the elements’ className to find an element and provide user onboarding. However, when I pass the class name with the hash value, it will break after the next deploy, because no such class will exist anymore.
I can provide the third party app with any css selector so I thought I could give it the elements’ id or a data property. Thus, something like this in the built instance of my app would work:
<div className="Header_mobileMenuToggle__6n6-W" id="Header_mobileMenuToggle">...</div>
Writing the respective jsx like this in all of my code would be tedious and not worth the no-code benefit from the third party integration.
Question
Is there any way, like with some dependency / library, to assign the original class name, or the non-hashed part of the class name to the id or some data-xxx property automatically when building my app?