Navigation Hooks
Navigation state and routing hooks
Hooks for navigation and routing state.
Package
@tetherto/mdk-react-devkit
Hooks
@tetherto/mdk-react-devkit
Persist sidebar state
import { useSidebarExpandedState, useSidebarSectionState } from '@tetherto/mdk-react-devkit'Related API
When to use sidebar state hooks
Use useSidebarExpandedState for the whole sidebar's expanded state and
useSidebarSectionState for an individual section. Both persist their value in
localStorage, so navigation choices survive a reload.
Sidebar state example
import {
useSidebarExpandedState,
useSidebarSectionState,
} from '@tetherto/mdk-react-devkit'
function AppSidebar() {
const [expanded, setExpanded] = useSidebarExpandedState(false)
const [devicesOpen, setDevicesOpen] = useSidebarSectionState('devices', true)
return (
<aside data-expanded={expanded}>
<button type="button" onClick={() => setExpanded(!expanded)}>
Toggle sidebar
</button>
<button type="button" onClick={() => setDevicesOpen(!devicesOpen)}>
Devices
</button>
{devicesOpen ? <DeviceLinks /> : null}
</aside>
)
}@tetherto/mdk-react-devkit
Import the public APIs on this page from @tetherto/mdk-react-devkit.
useSidebarExpandedState
Custom hook to persist sidebar expanded state in localStorage
(defaultExpanded: boolean) => [boolean, (expanded: boolean) => void]useSidebarSectionState
Custom hook to persist individual section open/closed states in localStorage
(sectionId: string, defaultOpen: boolean) => [boolean, (open: boolean) => void]