'use client'; import * as React from 'react'; import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'; import { AnimatePresence, motion, type Transition } from 'motion/react'; interface CollapsibleContextType { isOpen: boolean; } const CollapsibleContext = React.createContext({ isOpen: false, }); const useCollapsible = (): CollapsibleContextType => { const context = React.useContext(CollapsibleContext); if (!context) { throw new Error('useCollapsible must be used within a Collapsible'); } return context; }; type CollapsibleProps = React.ComponentPropsWithoutRef< typeof CollapsiblePrimitive.Root >; const Collapsible: React.FC = ({ children, ...props }) => { const [isOpen, setIsOpen] = React.useState( props?.open ?? props?.defaultOpen ?? false, ); const handleOpenChange = React.useCallback( (open: boolean) => { setIsOpen(open); props.onOpenChange?.(open); }, [props], ); return ( {children} ); }; type CollapsibleTriggerProps = React.ComponentPropsWithoutRef< typeof CollapsiblePrimitive.Trigger >; const CollapsibleTrigger = CollapsiblePrimitive.Trigger; type CollapsibleContentProps = React.ComponentPropsWithoutRef< typeof CollapsiblePrimitive.Content > & { transition?: Transition; }; const CollapsibleContent = React.forwardRef< React.ComponentRef, CollapsibleContentProps >( ( { className, children, transition = { type: 'spring', stiffness: 150, damping: 17 }, ...props }, ref, ) => { const { isOpen } = useCollapsible(); return ( {isOpen && ( {children} )} ); }, ); CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName; export { Collapsible, CollapsibleTrigger, CollapsibleContent, useCollapsible, type CollapsibleContextType, type CollapsibleProps, type CollapsibleTriggerProps, type CollapsibleContentProps, };

Collapsible

@peduarte starred 3 repositories

Installation

Props

Animate UI Props

CollapsibleContent

Credits

On this page