Make SortableGallery image removable via dnd-kit Sortable

[keymartech]

I see the ability to add removable attribute to <Sortable /> in dnd-kit documentation,
presets-sortable-horizontal--removable-items, but I can't figure out how to add this to my RowsPhotoAlbum SortableGallery implementation. Any help or direction would be much appreciated!

[igordanchenko]

Neither removable attribute nor <Sortable /> component are part of the dnd-kit library. It's just an example they provide in the story book, very much like SortableGallery is just an example you can use a starting point in your implementation. For example, you can implement something to this effect:

<SortableGallery
  gallery={RowsPhotoAlbum}
  spacing={16}
  padding={10}
  photos={photos}
  movePhoto={(oldIndex, newIndex) => setPhotos(arrayMove(photos, oldIndex, newIndex))}
  render={{
    extras: (_, { index }) => (
      <button
        type="button"
        style={{
          position: "absolute",
          right: 0,
          top: 0,
          border: 0,
          background: "none",
          cursor: "pointer",
          padding: 8,
        }}
        onKeyDown={(event) => {
          event.stopPropagation();
        }}
        onClick={() => {
          setPhotos(photos.filter((_, i) => index !== i));
        }}
      >
        X
      </button>
    ),
  }}
/>

[keymartech]

Thanks for clearing that up... this implementation is perfect for me. All of your work on react-photo-album is much appreciated. And thanks again for pointing me in the right direction. I wish I could give your repo a second star!