API Reference

type SheetEdge = 'top' | 'bottom' | 'left' | 'right';

type Align = 'start' | 'center' | 'end';

<Sheet open={isOpen} onOpenChange={setIsOpen} edge="right">
  ...
</Sheet>

<Sheet onOpen={() => console.log('fully open')} onClose={() => console.log('fully closed')}>
  ...
</Sheet>

const ref = useRef<SheetRef>(null);
 
// Later:
ref.current?.open();
ref.current?.close();
ref.current?.toggle();
console.log(ref.current?.isOpen);

type SheetEdge = 'top' | 'bottom' | 'left' | 'right';

// No backdrop
<Sheet backdrop={false}>...</Sheet>
 
// Custom backdrop
<Sheet
  backdropComponent={(props) => (
    <div
      style={{
        position: 'absolute', inset: 0,
        opacity: props.isExiting ? 0 : props.isEntered ? 1 : 0,
        background: 'rgba(0,0,0,0.5)',
        transition: 'opacity 0.3s',
      }}
      onClick={props.closeOnBackdropClick ? props.close : undefined}
    />
  )}
>
  ...
</Sheet>

import { Sheet, SheetBackdrop } from 'react-edge-sheet';
 
<Sheet
  backdropComponent={(props) => (
    <SheetBackdrop
      closeOnBackdropClick={props.closeOnBackdropClick}
      backdropStyle={props.style}
      backdropClassName={props.className}
    />
  )}
>
  ...
</Sheet>

import { useSheet } from 'react-edge-sheet';
 
const { isOpen, isExiting, isEntered, openFn, closeFn, toggle } = useSheet({
  open: controlledOpen,
  onOpenChange: setOpen,
  onOpen: () => console.log('opened'),
  onClose: () => console.log('closed'),
});

import { useSheetContext } from 'react-edge-sheet';
 
function MyCloseButton() {
  const { isEntered, isExiting, close } = useSheetContext();
  return (
    <button onClick={close} style={{ opacity: isEntered && !isExiting ? 1 : 0 }}>
      Close
    </button>
  );
}

interface SheetBackdropComponentProps {
  isExiting: boolean;
  isEntered: boolean;
  close: () => void;
  closeOnBackdropClick: boolean;
  style?: React.CSSProperties;
  className?: string;
}

interface SheetProps {
  children?: React.ReactNode;
 
  /** Which screen edge the sheet slides from. Default: 'bottom' */
  edge?: SheetEdge;
 
  /** Horizontal align for top/bottom, vertical align for left/right. Default: 'center' */
  align?: 'start' | 'center' | 'end';
 
  /** Controlled open state */
  open?: boolean;
 
  /** Called when open state should change */
  onOpenChange?: (open: boolean) => void;
 
  /** Fires after enter animation completes */
  onOpen?: () => void;
 
  /** Fires after exit animation completes */
  onClose?: () => void;
 
  /** Portal target. undefined = document.body, null = inline render */
  portal?: HTMLElement | null;
 
  /** Close when backdrop is clicked. Default: true */
  closeOnBackdropClick?: boolean;
 
  /** When false, no backdrop is rendered. Default: true */
  backdrop?: boolean;
 
  /** Custom backdrop component. Receives SheetBackdropComponentProps */
  backdropComponent?: (props: SheetBackdropComponentProps) => React.ReactNode;
 
  /** Animate panel size changes via ResizeObserver. Default: true */
  animateSize?: boolean;
 
  /** CSS z-index. Default: 200 */
  zIndex?: number;
 
  /** max-height (vertical sides) or max-width (horizontal sides) */
  maxSize?: string;
 
  /** Explicit max-height of the panel */
  maxHeight?: string;
 
  /** Explicit max-width of the panel */
  maxWidth?: string;
 
  /** Shorthand: min-height (vertical) or min-width (horizontal) */
  minSize?: string;
 
  /** Explicit min-height of the panel */
  minHeight?: string;
 
  /** Explicit min-width of the panel */
  minWidth?: string;
 
  /** Override panel slide transition */
  transition?: string;
 
  /** Override size-change transition when animateSize is true */
  sizeTransition?: string;
 
  /** Override backdrop opacity transition (default backdrop only) */
  backdropTransition?: string;
 
  /** Inline styles for the backdrop (default backdrop only) */
  backdropStyle?: React.CSSProperties;
 
  /** CSS class for the backdrop (default backdrop only) */
  backdropClassName?: string;
 
  /** Inline styles for the sheet panel */
  style?: React.CSSProperties;
 
  /** CSS class for the sheet panel */
  className?: string;
 
  /** Enable drag-to-dismiss gesture. Default: false (true when showDragHandle is true) */
  draggable?: boolean;
 
  /** Show a drag handle pill. Also enables draggable unless explicitly set to false. */
  showDragHandle?: boolean;
 
  /** Inline styles for the default drag handle pill. Ignored when dragHandleComponent is set. */
  dragHandleStyle?: React.CSSProperties;
 
  /** CSS class for the default drag handle pill. Ignored when dragHandleComponent is set. */
  dragHandleClassName?: string;
 
  /** Replace the default drag handle pill with a custom element. */
  dragHandleComponent?: React.ReactNode;
 
  /** Pixels to drag before dismissing. Default: 80 */
  dragThreshold?: number;
 
  /** Velocity (px/ms) above which release triggers dismiss. Default: 0.3 */
  dragVelocityThreshold?: number;
 
  /** Snap points array in ascending order, e.g. ['200px','50vh','90vh'] */
  snapPoints?: string[];
 
  /** Initial snap index. Default: last (largest) snap point */
  defaultSnapPoint?: number;
 
  /** Called when the active snap point changes */
  onSnapChange?: (index: number) => void;
}