Extending data attributes of Transition-Component and TransitionChild-Component

[aufdenpunkt]

Hi,

First, thanks for this great library, which I really like to use in my projects.

I have the use case where I built a reusable carousel based on XState and your Transition/TransitionChild component. As the carousel can have slides that can animate in the left or right direction, I was curious if there is a way to extend or abstract the data attributes by something like data-next or data-previous for these components.

In my case, the logic behind the extra attributes comes from the state management.

I was thinking about something like this:

export function ExtendedTransition({ children }) {
  const { transitionDirection } = useCarouselSelectors();

  const dataAttributes = {
    'data-next': transitionDirection === 'next' ? '' : null,
    'data-previous': transitionDirection === 'previous' ? '' : null,
  };

  return <Transition {...dataAttributes}>{children}</Transition>;
}

export function ExtendedTransitionChild({ children }) {
  const { transitionDirection } = useCarouselSelectors();

  const dataAttributes = {
    'data-next': transitionDirection === 'next' ? '' : null,
    'data-previous': transitionDirection === 'previous' ? '' : null,
  };

  return <TransitionChild {...dataAttributes}>{children}</TransitionChild>;
}

Thanks and best,
Chris