Components

Component

Snackbar

Temporary bottom message for status or result feedback.

ReactReact Native7 props
PreviewReact

Imports

import { Snackbar, SnackbarProvider, useSnackbarAdapter, SnackbarAvoidOverlap } from "@hozorica/hods-react/snackbar";
import { Snackbar, SnackbarProvider, useSnackbarAdapter, SnackbarAvoidOverlap } from "@hozorica/hods-react-native/snackbar";

Props

PropTypeDescription
message *stringSnackbar message.
actionLabel / onActionstring / () => voidOptional action button.
shouldCloseOnActionbooleanCloses after action by default.
variantdefault | positive | criticalSemantic visual style.
timeout / removeDelaynumberAdapter create timing options.
strategyimmediate | queuedReplacement or queue behavior.
pauseOnInteractionbooleanPauses timeout while interacting on web.

Platform Support

React

Provider and adapter based snackbar with timeout, immediate/queued strategy, pause-on-interaction, action close, and avoid-overlap offset.

React Native

Modal-based snackbar provider with adapter and avoid-overlap offset.

Usage

<SnackbarProvider><ComponentThatCallsAdapter /></SnackbarProvider>

Notes

  • Create snackbars through useSnackbarAdapter inside SnackbarProvider.
  • Use SnackbarAvoidOverlap for fixed bottom bars that must not be covered.