How to integrate analytics-related data attributes in React Aria Components

[Raja-Techie-45]

Hi team 👋,

I'm using react-aria-components in my project, and I have a use case where I need to add custom values to attributes (like id) to elements.

For example, I’m using a ToggleButton like this:

<ToggleButton id="planning">
  Planning Mode
</ToggleButton>

In this case:

• I want to use the id="planning" for state management.
• But I also want to add an attribute like id="bt-day-plan-planning-mode" for GTM/analytics tracking.

So the expected DOM output should be:

<button id="bt-day-plan-planning-mode">Planning Mode</button>

❓ My Question:

Is there a supported way in react-aria-components to add custom values to attributes like id to the root DOM node of components like <ToggleButton />?

I would appreciate any suggestions or best practices for integrating analytics into this setup.

Thanks in advance!

[Nagendra7509]

Thanks for raising this issue! I’m also running into the same problem and would appreciate any updates or suggested workarounds. Looking forward to a fix or recommended approach from the maintainers.

[snowystinger]

Thanks for the discussion. We support data-* attributes on the root node of every React Aria Component. Could you use that instead?