[Feature Request] allow to pass react fragments or insert react nodes between list items

[VityaSchel]

Currently it's impossible to use react-swipeable-list with fragments because it breaks and actions does not work.

[marekrozmus]

@VityaSchel Please provide any code snippet you would like to use.

[it-nalon]

I had the same issue, I have an UI where every swipable item has a title.

Something like that:

I tried wrapping the item in a <div /> but it broke the swipe functionality, after looking at the source code I created the <SwipableListItemProxy /> component:

import { Children, ReactNode, cloneElement } from 'react'

export type SwipableListItemProxyProps = {
  header?: ReactNode
  footer?: ReactNode
  children: ReactNode
} & Record<string, any>

export function SwipableListItemProxy({
  children,
  header,
  footer,
  ...props
}: SwipableListItemProxyProps) {
  return (
    <>
      {header}
      {Children.map(children, (child, index) =>
        cloneElement(child as any, {
          ...props,
        })
      )}
      {footer}
    </>
  )
}

Now I can use it like that:

<SwipeableList type={ListType.IOS}>
  <SwipableListItemProxy header={<div>My Header</div>}>
    <SwipeableListItem>...</SwipeableListItem>
  </SwipableListItemProxy>
</SwipeableList>

It's far from perfect, I don't like the component name nor the props and there's no error management, but it's easily customizable to suit other needs.

[gmfacundo]

Hey, I was wondering if is there any workaround for this issue?

I'm struggling to implement this library along with dnd-kit/sortable. When I tried to wrap the list items between fragments I encountered this error.

[it-nalon]

Hey, I was wondering if is there any workaround for this issue?

I'm struggling to implement this library along with dnd-kit/sortable. When I tried to wrap the list items between fragments I encountered this error.

Did you try with my solution?

[gmfacundo]

Hey @it-nalon. Yes I tried to use your code as a template but I couldn't make it work for my case.

I have to mention that I'm still learning and it was the first time that I tried to extend a library by my own.