Dynamic Scroll Island Filter
A dynamic Table of Contents, crafted in React's grace, with scrolling magic and animations fair. It tracks thy progress, marks each chosen place; perfect for pages long—thy reader's guide with flair!
All
Installation
Understanding the Component
The DynamicToc component manages a table-of-contents (TOC) with interactive and animated behavior:
-
State Management:
- Uses local state to track whether the TOC is open (open) and the currently selected TOC item (value).
- Listens for the Escape key to close the TOC.
-
Animation & Layout:
- Uses the motion library to animate transitions for opening/closing the overlay and the TOC panel.
- The component toggles between a compact view and an expanded view using animated layout transitions with predefined keys for smooth motion.
-
UI Elements:
- Text Section: Displays the selected TOC item's name alongside a circular progress indicator that animates based on scroll position.
- Progress Indicator: Shows a percentage or an icon based on the selection; updates as the user scrolls.
- Items List: Renders a list of TOC items. Hover and click interactions change the opacity for visual feedback.
- Overlay: When open, a backdrop is rendered to focus user interaction on the TOC and enable closing via clicking outside.
-
Scroll Integration:
- Uses hooks like useScroll, useSpring, and useTransform to bind scroll progress to the SVG animation, creating a visual representation of scroll progress around a circle.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | TOC_INTERFACE | none | The currently selected TOC item. |
| setValue | (v: TOC_INTERFACE) => void | none | Callback to update the selected TOC item. |
| data | TOC_INTERFACE[] | none | Array of TOC items used to render the list of selectable items. |
| ref | any | none | Reference to the container used for tracking scroll progress. |
| transition | Transition | { type: "spring", duration: 0.5, bounce: 0.1 } | Configuration for the animation transitions. |
| className | string | none | Additional CSS classes for custom styling of the component. |
TOC_INTERFACE (exported)
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | none | Title or label of the TOC item. |
| value | string | none | Optional value associated with the TOC item. |