feat: React component interface

[Neurrone]

Feature Request

Description

For ease of use, it would be great if this was available as a React component.

The current use of a global variable is problematic in component-based applications.

Motivation

Grafana is mostly useless for screen reader users right now. Hence, I was prototyping the creation of a panel plugin that uses Maidr.

I quickly ran into issues because of the current requirement to use a script tag.

Proposed Solution

Provide a React component interface.

Additional Context

This would enable the library to be used more easily, encouraging adoption.

Checklist

• I have searched for similar feature requests and confirmed that this is a new request.
• I have provided a clear and concise description of the feature.
• I have explained the motivation behind this feature request.
• I have outlined a proposed solution or ideas for implementing this feature.
• I have provided any additional context or screenshots if applicable.

[jooyoungseo]

@Neurrone Thanks for your feedback. We are currently working on a TypeScript migration of this project and will be addressing this issue as part of that. FYI, we have a Python binder that supports dashboard support (e.g., Streamlit, Shiny, etc.) Please feel free to check out Py maidr for more info.

[Neurrone]

Good to hear that this is planned.

About the Python bindings, do you have control over the generated HTML such that the current restriction of a single global isn't an issue? I'm curious how that issue was worked around.

The readme mentions that it needs a selector. I also notice that when using the galary, pressing the arrow keys does highlight the relevant portion of the chart. How is that implemented, and would I also need the selector to point to an SVG to use it with Maidr?