Components
imports.ts
// Provider — wraps your app, provides context
import { SwipeBarProvider } from "@luciodale/swipe-bar";
// Sidebars — place inside the provider
import { SwipeBarLeft } from "@luciodale/swipe-bar";
import { SwipeBarRight } from "@luciodale/swipe-bar";
import { SwipeBarBottom } from "@luciodale/swipe-bar";
// Overlay — optional, auto-rendered by sidebars when showOverlay is true
import { Overlay } from "@luciodale/swipe-bar";
// Toggle buttons — standalone toggle components for custom layouts
import { ToggleLeft } from "@luciodale/swipe-bar";
import { ToggleRight } from "@luciodale/swipe-bar";
import { ToggleBottom } from "@luciodale/swipe-bar";Hooks
hooks.ts
import { useSwipeBarContext } from "@luciodale/swipe-bar";
import { useMediaQuery } from "@luciodale/swipe-bar";
// useSwipeBarContext<TMap>() — returns the full sidebar context
const {
// State
isLeftOpen, // boolean
isRightOpen, // boolean
isBottomOpen, // boolean (primary instance)
bottomAnchorState, // "closed" | "midAnchor" | "open"
leftSidebars, // Record<string, TLeftRightSidebarState>
rightSidebars, // Record<string, TLeftRightSidebarState>
bottomSidebars, // Record<string, TBottomSidebarState>
// Actions
openSidebar, // (side, opts?) => void
closeSidebar, // (side, opts?) => void
openSidebarFully, // (side, opts?) => void — skip mid-anchor, go full
openSidebarToMidAnchor, // (side, opts?) => void — bottom only
// Meta
leftMeta, // TMap["left"] | null
rightMeta, // TMap["right"] | null
setMeta, // (side, metaOrOpts) => void
// Options
globalOptions, // Required<TSwipeBarOptions>
setGlobalOptions, // (partial) => void
} = useSwipeBarContext();
// useMediaQuery(width) — true when viewport < width
const isMobile = useMediaQuery(640);Types
types.ts
import type {
TSwipeBarOptions, // all configurable options
TBottomSidebarState, // { isOpen, anchorState, meta }
TLeftRightSidebarState, // { isOpen, meta }
TSidebarMetaMap, // { left?, right?, bottom?: Record<string, unknown> }
TSidebarOpts, // { id?, meta?, resetMeta?, skipTransition? }
} from "@luciodale/swipe-bar";TSwipeBarOptions
The full options type. Every field is optional. These flow through the provider and can be overridden on each sidebar component:
TSwipeBarOptions.ts
type TSwipeBarOptions = {
transitionMs?: number; // default: 300
sidebarWidthPx?: number; // default: 320
sidebarHeightPx?: number; // default: window.innerHeight
isAbsolute?: boolean; // default: false
edgeActivationWidthPx?: number; // default: 40
dragActivationDeltaPx?: number; // default: 20
showOverlay?: boolean; // default: true
overlayBackgroundColor?: string; // default: "rgba(0, 0, 0, 0.5)"
closeSidebarOnOverlayClick?: boolean; // default: true
toggleIconSizePx?: number; // default: 40
toggleIconColor?: string; // default: "white"
toggleIconEdgeDistancePx?: number; // default: 40
showToggle?: boolean; // default: true
mediaQueryWidth?: number; // default: 640
swipeBarZIndex?: number; // default: 30
toggleZIndex?: number; // default: 15
overlayZIndex?: number; // default: 20
fadeContent?: boolean; // default: false
fadeContentTransitionMs?: number; // default: 100
swipeToOpen?: boolean; // default: true
swipeToClose?: boolean; // default: true
disableSwipe?: boolean; // default: false
midAnchorPoint?: boolean; // default: false
midAnchorPointPx?: number; // default: half of sidebarHeightPx
disabled?: boolean; // default: false
resetMetaOnClose?: boolean; // default: false
};Context Actions
All action functions accept a side parameter
("left" | "right" | "bottom") and an
optional opts object:
actions.ts
type TSidebarOpts = {
id?: string; // sidebar instance ID for any direction (default: "primary")
meta?: unknown; // metadata to attach (typed when using generic)
resetMeta?: boolean; // clear meta to null
skipTransition?: boolean; // instant open/close, no animation
};
// Examples:
openSidebar("left");
openSidebar("left", { id: "secondary" });
openSidebar("right", { id: "settings" });
openSidebar("bottom", { id: "secondary" });
closeSidebar("left", { resetMeta: true });
openSidebarToMidAnchor("bottom", { meta: { filter: "active" } });
openSidebarFully("bottom"); // skips mid-anchor, goes straight to full