next-use-smooth-scroll

A simple smooth scroll react hook for Next.js

Install

1pnpm add next-use-smooth-scroll

or

1yarn add next-use-smooth-scroll

or

1npm install next-use-smooth-scroll

Use Case

1import { useSmoothScroll } from 'next-use-smooth-scroll'
2import { useSearchParams } from 'next/navigation'
3import Link from 'next/link'
4
5const menuItems: MenuItem[] = [
6  {
7    href: '#Home',
8  },
9  {
10    href: '#About',
11  },
12  {
13    href: '#Activities',
14  },
15]
16
17const activeHash = useSmoothScroll(
18  menuItems.map(item => item.href),
19  useSearchParams
20)
21
22return (
23  <ul>
24    {menuItems.map((item, index) => (
25      <li key={index}>
26        <Link href={item.href} scroll={false} className={`${activeHash === item.href ? 'active' : ''}`}>
27          {item.text}
28        </Link>
29      </li>
30    ))}
31  </ul>
32)