usePage#

Import#

import { usePage } from 'bumbag';

Usage#

The usePage hook will give you meta data about the page, as well as sidebar & header utilities.

function Example() {
  const page = usePage();
  return (
    <Stack spacing="major-1">
      <Box>Is page collapsed? {page.isCollapsed ? 'Yes' : 'No'}</Box>
      <Box>Is sidebar open? {page.sidebar.isOpen ? 'Yes' : 'No'}</Box>
      <Box>Is header open? {page.header.isOpen ? 'Yes' : 'No'}</Box>
      <Button onClick={page.sidebar.toggle}>Toggle sidebar</Button>
      <Button onClick={page.header.toggle}>Toggle header</Button>
    </Stack>
  );
}

Schema#

const {
  isCollapsed,
  sidebar: {
    isOpen,
    isMinimized,
    open,
    close,
    toggle,
    minimize,
    maximize,
    toggleMinimize
  },
  header: {
    isOpen,
    open,
    close,
    toggle
  }
} = usePage()

Return values#

isCollapsed boolean

Returns truthy if the page has collapsed to the collapse breakpoint (mobile view).

sidebar.isOpen boolean

Returns truthy if the sidebar is open.

sidebar.isMinimized boolean

Returns truthy if the sidebar is minimized.

sidebar.open function

Opens the sidebar

sidebar.close function

Closes the sidebar

sidebar.toggle function

Toggles the sidebar

sidebar.minimize function

Minimizes the sidebar

sidebar.maximize function

Maximizes the sidebar

sidebar.toggleMinimize function

Toggles if the sidebar is minimized or maximized

header.isOpen boolean

Returns truthy if the header is open.

header.open function

Opens the header

header.close function

Closes the header

header.toggle function

Toggles the header