Drag-and-drop reordering with dnd-kit #426
aaronadamsCA
started this conversation in
Show and tell
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Here's my first take on a drag-and-drop reorder component using the Conform reorder intent:
https://stackblitz.com/edit/conform-dnd-kit-reorder?file=app%2Froutes%2F_index%2Froute.tsx
This provides a
SortableFieldList
component using@dnd-kit/sortable
and the ConformFormContext
API.The biggest challenge was addressing the fact that you need to use
getFieldList().map((metadata) => {})
when rendering the list of items to ensure you can setkey={metadata.key}
on each one. Without this, the reorder intent doesn't work. But the metadata contains only the ID of the sortable component, without the rest of the data needed for rendering.My simple solution was this component interface:
Map
associating each ID with a React node, then pass only itskeys()
to Conform'sdefaultValue
.getFieldList()
andget()
the React node from theMap
, which is very fast.Since this uses a Conform intent and
parseWithZod
, everything should still work even without a client-sideonValidate
function! The visual transitions would just need a bit of work.Let me know what you think and if you have any ideas for improvements.
Beta Was this translation helpful? Give feedback.
All reactions