Swipe actions
A list row that follows a swipe to reveal actions, and commits on a full flick.
API reference
Components
<SwipeActionsList />
List container that coordinates single-open state across rows.
children?
The SwipeActions rows.
className?
Merged onto the <ul>.
style?
Inline styles merged onto the <ul>.
ref?
Forwarded to the <ul>.
<SwipeActions />
One swipeable row with pointer/drag machinery and spring follow.
id
Stable id for this row. Required.
children?
The row face that slides over the actions.
left?
Actions revealed by swiping the row right.
right?
Actions revealed by swiping the row left.
rowHeight?
Row height in px. Defaults to 88.
revealThreshold?
Fraction of the row a swipe must clear to snap open. Defaults to 0.25.
fullSwipeThreshold?
Fraction of the row a swipe must clear to commit a full swipe. Defaults to 0.8.
revealAmount?
How far the row snaps open, as a fraction of its width. Defaults to 0.5.
index?
This row's position in the list, for the entrance stagger. Defaults to 0.
isLast?
Drop the bottom divider on the last row. Defaults to false.
className?
Merged onto the row <li>.
<SwipeAction />
A single revealed action with elastic offset/scale as the swipe crosses.
icon
The action glyph.
label
The short action label.
side
Which edge this action lives on.
primary?
Whether this is the outer primary action on its side. Defaults to false.
fillClassName
Fill and text classes for this action's box.
ariaLabel
The button's accessible label.
onActivate
Fired when the action is tapped or a full swipe commits it.
Hooks
useSwipeRow
Read the enclosing row's live swipe state from a face.
useSwipeRow(): SwipeRowStateReturns
progress
Live swipe progress in [-1, 1].
spring
The snap spring the row follows with.
flat
True under reduced motion.
