Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add index signature to TRenderProps to allow passing data-* attributes #117

Open
andreavaccari opened this issue Sep 20, 2022 · 0 comments

Comments

@andreavaccari
Copy link

Hi @rgossiaux, thank you for your work. We're using version 1.0.2.

We need to pass data-* attributes to HeadlessUI components, e.g.:

<Switch data-some-attr="foo" ...>
  ...
</Switch>

The attributes are correctly passed to the HTML element:

<button data-some-attr="foo" ...>
  ...
</button>

However, running tsc --noEmit, TypeScript complains that:

Object literal may only specify known properties, and '"data-some-attr"' does not exist in type 'Omit<TRenderProps<{ checked: boolean; }, "button", "button">, TInternalProps | "as" | "static" | "unmount"> & { as?: "button" | undefined; } & { checked: boolean; }'

Would it be ok to modify the definition of TRenderProps to include an index signature:

  [attr: string]: string

We could also enforce that index props start with data-, although this is not necessary.

If you give me the green light, I will send a PR. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant