89 lines
2.7 KiB
Plaintext
89 lines
2.7 KiB
Plaintext
---
|
|
title: Pin List
|
|
description: A playful list for pinning and unpinning items, with smooth animated transitions as items move between groups.
|
|
author:
|
|
name: arhamkhnz
|
|
url: https://github.com/arhamkhnz
|
|
new: true
|
|
---
|
|
|
|
<ComponentPreview name="pin-list-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="pin-list" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<PinList items={ITEMS} />
|
|
```
|
|
|
|
## Props
|
|
|
|
### PinList
|
|
|
|
<TypeTable
|
|
type={{
|
|
items: {
|
|
description:
|
|
'Array of items to show in the list. Each item should have id, name, info, icon, and pinned.',
|
|
type: 'PinListItem[]',
|
|
required: true,
|
|
},
|
|
labels: {
|
|
description:
|
|
'Custom labels for the pinned and unpinned sections. Example: { pinned: "Favorites", unpinned: "All" }.',
|
|
type: '{ pinned?: string; unpinned?: string; }',
|
|
required: false,
|
|
default: '{ pinned: "Pinned Items", unpinned: "All Items" }',
|
|
},
|
|
transition: {
|
|
description:
|
|
'Spring animation config for item transitions. Controls the movement physics. Example: { stiffness: 320, damping: 20, mass: 0.8, type: "spring" }',
|
|
type: '{ stiffness?: number; damping?: number; mass?: number; type?: string; }',
|
|
required: false,
|
|
default: '{ stiffness: 320, damping: 20, mass: 0.8, type: "spring" }',
|
|
},
|
|
labelMotionProps: {
|
|
description:
|
|
'Motion props for the section labels. Allows customizing the label enter/exit animation. Example: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.22, ease: "easeInOut" } }',
|
|
type: '{ initial?: object; animate?: object; exit?: object; transition?: object; }',
|
|
required: false,
|
|
default:
|
|
'{ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.22, ease: "easeInOut" } }',
|
|
},
|
|
className: {
|
|
description: 'Class name for the outermost container.',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
labelClassName: {
|
|
description: 'Class name for the section labels.',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
pinnedSectionClassName: {
|
|
description: 'Class name for the pinned items group.',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
unpinnedSectionClassName: {
|
|
description: 'Class name for the unpinned items group.',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
zIndexResetDelay: {
|
|
description:
|
|
'Delay (in ms) before resetting z-index after toggle, should match your animation duration if changed.',
|
|
type: 'number',
|
|
required: false,
|
|
default: '500',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- Credits to [Nitish Khagwal](https://x.com/nitishkmrk) for [this X post](https://x.com/nitishkmrk/status/1933050634594660800) as inspiration
|