Reakit: Should [data] attributes be prefixed with "reakit-"?

[tom-sherman]

data-enter and data-leave are currently unprefixed which is supprising to me because all libraries I've worked with have these kinds of props prefixed under some namespace, presumable to prevent collisions.

What do we think about prefixing these props with reakit-?

[open-collective-bot[bot]]

Hey @tom-sherman :wave:,

Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.

If you use Reakit at work, you can also ask your company to sponsor us :heart:.

[diegohaz]

Those attributes are part of the component API. My understanding is that, the same way we don't prefix component props, we shouldn't prefix those data-* attributes.

If it causes name collisions, users can change them:

import { useDisclosureState, Disclosure, DisclosureContent } from "reakit";

function Example() {
  const disclosure = useDisclosureState({ animated: true });
  return (
    <>
      <Disclosure {...disclosure}>Toggle</Disclosure>
      <DisclosureContent {...disclosure}>
        {({ "data-leave": leave, "data-enter": enter, ...contentHTMLProps }) => (
          <ComponentThatAlreadyHasDataLeave
            {...contentHTMLProps}
            data-animation-leave={leave}
            data-animation-enter={enter}
          />
        )}
      </DisclosureContent>
    </>
  );
}

Also, for other component libraries or design systems using Reakit as an implementation detail, I wouldn't like to pollute the API with more reakit (by default as they could use the same approach above to overwrite it).

That said, we can leave this open and wait to hear other folks. I'm totally open for prefixing data-* in v2 if this represents a problem. 🙂

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.