Skip to main content
K
Last modified: 4/Oct/2024

useFocusTrap

Hook for maintaining the focused element in a particular context.

#Usage

import { useFocusTrap } from '@kinsta/stratus' const MyComponent = () => { const { setup, contextRef, autoFocusRef } = useFocusTrap() return ( <div ref={ref}> This is a collapsible area </div> ) }

#Parameters

#isCollapsed
Required
boolean
Initial state of the collapsed area
#mode
"horizontal" ǀ "vertical" ǀ "both"
Sets the animation mode - Defaults to "vertical"
#parentRef
React.RefObject<HTMLDivElement>
Ref object for the parent element

#Types

  • UseFocusTrapReturn

Read more about types here