Components

Component

BottomSheet

Modal sheet that rises from the bottom of the viewport.

ReactReact Native8 props
PreviewReact

Imports

import { BottomSheetRoot, BottomSheetTrigger, BottomSheetContent, BottomSheetBody, BottomSheetFooter } from "@hozorica/hods-react/bottom-sheet";
import { BottomSheetRoot, BottomSheetTrigger, BottomSheetContent, BottomSheetBody, BottomSheetFooter } from "@hozorica/hods-react-native/bottom-sheet";

Props

PropTypeDescription
open / defaultOpenbooleanControlled and uncontrolled open state.
onOpenChange(open, details) => voidReceives open state and close reason.
headerAlignleft | centerAligns generated title and description.
dismissiblebooleanDisables escape, outside interaction, and implicit dismiss behavior when false.
closeOnEscapebooleanEscape on web; Android back on React Native.
closeOnInteractOutsidebooleanControls backdrop press/click dismissal.
title / descriptionReactNodeContent header text rendered by BottomSheetContent.
showHandle / showCloseButtonbooleanControls the drag handle visual and close button.

Platform Support

React

Portal-based modal dialog with trigger, header, body, footer, escape key, outside click, and scroll lock.

React Native

Modal-based bottom panel with trigger, title, description, body, footer, and Android back handling.

Usage

<BottomSheetRoot><BottomSheetTrigger asChild><ActionButton>Open</ActionButton></BottomSheetTrigger><BottomSheetContent title="Title"><BottomSheetBody>Content</BottomSheetBody><BottomSheetFooter>...</BottomSheetFooter></BottomSheetContent></BottomSheetRoot>

Notes

  • Use BottomSheet for mobile-first detail, short forms, or action groups that should preserve page context.
  • Use AlertDialog when the user must confirm a destructive or interruptive action.
  • This implementation is modal and accessible; physics-based drag and snap behavior is not part of the public API yet.