|
2 | 2 |
|
3 | 3 | A lightweight React library to synchronize a vertical navigation menu with scrollable content sections. Ideal for advanced catalogs, filter drawers, and any layout that needs a **sticky nav** that tracks the **visible section** and enables **smooth scroll**. |
4 | 4 |
|
5 | | -<p align="center"> |
6 | | - <a href="https://www.npmjs.com/package/@dorixdev/react-dual-scroll-sync"> |
7 | | - <img alt="npm version" src="https://img.shields.io/npm/v/@dorixdev/react-dual-scroll-sync?logo=npm&color=cb3837"> |
8 | | - </a> |
9 | | - <a href="https://github.com/dorixdev/react-dual-scroll-sync/actions/workflows/release.yml"> |
10 | | - <img alt="build status" src="https://github.com/dorixdev/react-dual-scroll-sync/actions/workflows/release.yml/badge.svg?branch=main"> |
11 | | - </a> |
12 | | - <a href="https://react-dual-scroll-sync.vercel.app"> |
13 | | - <img alt="docs" src="https://img.shields.io/badge/docs-Storybook-ff4785?logo=storybook"> |
14 | | - </a> |
15 | | - <a href="https://bundlephobia.com/package/@dorixdev/react-dual-scroll-sync"> |
16 | | - <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@dorixdev/react-dual-scroll-sync?label=size&logo=webpack"> |
17 | | - </a> |
18 | | - <a href="./LICENSE"> |
19 | | - <img alt="license" src="https://img.shields.io/badge/License-MIT-blue.svg"> |
20 | | - </a> |
21 | | -</p> |
22 | | - |
23 | | -<p align="center"> |
24 | | - <img alt="Demo" src="https://raw.githubusercontent.com/dorixdev/react-dual-scroll-sync/main/demo/preview.gif" width="720" /> |
25 | | -</p> |
26 | | - |
27 | | -### 💡 Features |
| 5 | +[](https://www.npmjs.com/package/@dorixdev/react-dual-scroll-sync) |
| 6 | +[](https://github.com/dorixdev/react-dual-scroll-sync/actions/workflows/release.yml) |
| 7 | +[](https://react-dual-scroll-sync.vercel.app) |
| 8 | +[](https://bundlephobia.com/package/@dorixdev/react-dual-scroll-sync) |
| 9 | +[](./LICENSE) |
| 10 | + |
| 11 | +## 💡 Features |
28 | 12 |
|
29 | 13 | - 🔗 **Sync state** between a vertical nav and the currently visible content section |
30 | 14 | - 🧭 **Programmatic scroll** to a section when a menu item is selected |
31 | 15 | - ✨ **Active item highlighting** and nav auto-scroll to keep it in view |
32 | 16 | - 🎨 **Themable styles**: override CSS variables to match your design |
33 | 17 | - 🧪 **Typed** (TypeScript) & framework-agnostic CSS |
34 | 18 |
|
| 19 | +## 🎥 Demo |
| 20 | + |
| 21 | +<img alt="Demo" src="https://raw.githubusercontent.com/dorixdev/react-dual-scroll-sync/main/demo/preview.gif" width="360" /> |
| 22 | + |
35 | 23 | ## 📦 Installation |
36 | 24 |
|
37 | 25 | ```bash |
|
0 commit comments