Hooks
/ API Reference
Hooks
/ API Reference

useDisclosure

A hook that provides the basic mechanics for toggling a layer in the most accessible way.
Useful for components like expandables or accordions.

The Gist

'use client'
import { useDisclosure } from '@weser/hooks'

function Component() {
  const { toggleProps, contentProps, isExpanded, toggle } = useDisclosure()

  return (
    <div>
      <button {...toggleProps}>{isExpanded ? 'Collapse' : 'Expand'}</button>
      <div {...contentProps}>Content</div>
    </div>
  )
}

Parameters

ParameterTypeDefaultDescription
defaultExpandedboolean?falseWhether the layer is expanded by default.

Returns

(Object) An object with the following properties:

PropertyTypeDescription
togglePropsRecord<string, any>The props for the toggle button.
contentPropsRecord<string, any>The props for the content.
isExpandedbooleanWhether the layer is expanded.
toggle() => voidThe function to toggle the layer.
On this page