01
02
03
04
05
06
Drag it, throw it, or use the arrows
Drag Rail
A rail you can drag, throw or step through. It always lands on a card, and the end of a drag never counts as a click.
Usage
import { useDragRail } from '@wdzyi/ui';
const { rail, ends, step } = useDragRail();
<div {...rail} className='rail'>
{cards}
</div>
<button disabled={ends.end} onClick={() => step(1)}>Next</button>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Returns
- railobject
- Spread it on the row. It has the ref and the pointer handlers.
- ends{ start, end }
- Whether it’s at either end, for disabling your arrows.
- step(direction: 1 | -1) => void
- Moves to the next or previous card.
Notes
- Letting go carries on in the direction of the throw. Snapping stays off until it has landed, so the two don’t fight.
- Touch scrolls natively, so dragging is only for a mouse.
- Set --rail-card and --rail-gap to change how wide the cards are and the space between them.
- With reduced motion, it moves straight to the card.