Data attribute types

[joetidee]

I see in your resulting .d.ts file that you have the DataAttribute type definition. Is there any reason the values aren't prefixed with data-? I was hoping to use this exported type definition directly in my code base.

[gabrieljablonski]

The way data attributes are handled internally in the library, we remove data- prefixes for less verbosity.

If that's a requirement in your project, I suggest you create a bindings file.

// react-tooltip-bindings.ts
import { DataAttribute } from 'react-tooltip';

export type PrefixedDataAttribute = `data-tooltip-${DataAttribute}`;

[joetidee]

It would be really helpful to have these types exported. I imagine that it is common to supply these attributes as props when creating reusable React components (where positioning, for example, of the tooltip needs to be dynamic).

I have managed to convert these in my app, but if more people are needing these types, it would be beneficial to have them available directly from this package.

Example I have used to convert them:

import { DataAttribute } from 'react-tooltip'

type PrefixUnion<K> = K extends string ? `data-tooltip-${K}` : K;

export type TDataToolTipAttributes = {[key in PrefixUnion<DataAttribute>]: string}

[joetidee]

Actually, the above code is incorrect as I am typing each as a string :(

I see that you are declaring these data- attributes here:

`declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    'data-tooltip-id'?: string
    'data-tooltip-place'?: PlacesType
    'data-tooltip-content'?: string | null
    'data-tooltip-html'?: string | null
    'data-tooltip-variant'?: VariantType
    'data-tooltip-offset'?: number
    'data-tooltip-wrapper'?: WrapperType
    /**
     * @deprecated Use `openOnClick` tooltip prop instead.
     */
    'data-tooltip-events'?: EventsType[]
    'data-tooltip-position-strategy'?: PositionStrategy
    'data-tooltip-delay-show'?: number
    'data-tooltip-delay-hide'?: number
    'data-tooltip-float'?: boolean
    'data-tooltip-hidden'?: boolean
    'data-tooltip-class-name'?: string
  }
}

would it be much effort to be able to have them abstracted as an importable type?

[gabrieljablonski]

would it be much effort to be able to have them abstracted as an importable type?

Not sure, but you're welcome to submit a PR if it's simple enough.

Since this isn't a common use case, if it ends up looking a bit too complex, we might just include as "cookbook recipe" on our docs page, so we keep internal type definitions simple.

Let me know your findings.

[github-actions[bot]]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.