Pin List
A playful list for pinning and unpinning items, with smooth animated transitions as items move between groups.
Made by arhamkhnzPinned Items
Commit Zone
Code updates · Closes 9:00 PM
404 Room
Fixing errors · Open 24 hours
All Items
NPM Stop
Install stuff · Closes 8:00 PM
Token Lock
Login stuff · Open 24 hours
Regex Zone
Find words · Closes 9:00 PM
Installation
Usage
Props
PinList
| Prop | Type | Default |
|---|---|---|
zIndexResetDelay? | number | 500 |
unpinnedSectionClassName? | string | - |
pinnedSectionClassName? | string | - |
labelClassName? | string | - |
className? | string | - |
labelMotionProps? | { initial?: object; animate?: object; exit?: object; transition?: object; } | { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.22, ease: "easeInOut" } } |
transition? | { stiffness?: number; damping?: number; mass?: number; type?: string; } | { stiffness: 320, damping: 20, mass: 0.8, type: "spring" } |
labels? | { pinned?: string; unpinned?: string; } | { pinned: "Pinned Items", unpinned: "All Items" } |
items | PinListItem[] | - |
Credits
- Credits to Nitish Khagwal for this X post as inspiration