1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- import { usePathname, useRouter, useSearchParams } from 'next/navigation'
- import { useState } from 'react'
- type UseTabSearchParamsOptions = {
- defaultTab: string
- routingBehavior?: 'push' | 'replace'
- searchParamName?: string
- disableSearchParams?: boolean
- }
- export const useTabSearchParams = ({
- defaultTab,
- routingBehavior = 'push',
- searchParamName = 'category',
- disableSearchParams = false,
- }: UseTabSearchParamsOptions) => {
- const router = useRouter()
- const pathName = usePathname()
- const searchParams = useSearchParams()
- const [activeTab, setTab] = useState<string>(
- !disableSearchParams
- ? (searchParams.get(searchParamName) || defaultTab)
- : defaultTab,
- )
- const setActiveTab = (newActiveTab: string) => {
- setTab(newActiveTab)
- if (disableSearchParams)
- return
- router[routingBehavior](`${pathName}?${searchParamName}=${newActiveTab}`)
- }
- return [activeTab, setActiveTab] as const
- }
|