useCollapse

React hook that helps creating accesssible Collapse components.

useCollapse works similar to useDisclosure, but adds a few extra options specifically for the Collapse component.

getCollapseProps returns an in prop instead of hidden and setting isCollapsible to false will omit the aria tags and click handler for the toggle element.

Import

import { useCollapse } from '@saas-ui/react'

Parameters

Name	Type	Description
`defaultIsOpen`	`boolean`	Set the collapse to open by default.
`onOpen`	`() => void`	Callback function, called when the collapse opens.
`onClose`	`() => void`	Callback function, called when the collapse closes.
`isCollapsible`	`boolean`	Set this to false to disable the collapse.

Return value

The useCollapse hook returns the isOpen state and two prop getter functions.

Name	Type	Description
`isOpen`	`boolean`	Boolean that indicates if the collapse is open or closed.
`getToggleProps`	`(props) => Object`	Returns properties for the toggle element.
`getCollapseProps`	`(props) => Object`	Returns properties for the collapse element.
`onOpen`	`() => void`	Open the collapse.
`onClose`	`() => void`	Close the collapse.
`onToggle`	`() => void`	Toggle the collapse.

Accessibility

Adds aria-expanded and aria-controls tags to the toggle component and a unique id collapse-[n] to the collapse.

Usage

Basic usage

function NavGroup({
  defaultIsOpen = true,
  title = 'Nav group',
  children = (
    <>
      <Link>Home</Link>
    </>
  ),
}) {
  const { isOpen, getToggleProps, getCollapseProps } = useCollapse({
    defaultIsOpen,
  })

  const headingStyles = {
    cursor: 'pointer',
    borderRadius: 'md',
    userSelect: 'none',
    p: 2,
    _hover: {
      bg: 'gray.600',
    },
  }

  return (
    <Box p="8">
      <Heading sx={headingStyles} size="md" {...getToggleProps()}>
        {title}
      </Heading>
      <Collapse {...getCollapseProps()}>
        <Box p={2}>{children}</Box>
      </Collapse>
    </Box>
  )
}

Props

Was this helpful?