Star on GitHub

SnapDock

An edge-pinned dock that slides along any side of the viewport and flips orientation automatically between horizontal and vertical layouts.

InstallDemoAPIExamples
Installation
npm install react-driftkit
Interactive Demo
Edge
Snap on Release
on
Draggable
on
Shadow
on
API Reference
Prop Type Default
children
Content rendered inside the dock.
 ReactNode —
defaultEdge
Which edge the dock pins to initially.
 'left' | 'right' | 'top' | 'bottom' 'left'
defaultOffset
Position along the edge, from 0 (top/left) to 1 (bottom/right).
 number 0.5
snap
When true, the dock snaps to the nearest edge on release.
 boolean true
draggable
Whether the user can drag the dock.
 boolean true
edgePadding
Distance in pixels from the viewport edge.
 number 16
shadow
Adds a default drop shadow. Override via style.boxShadow.
 boolean false
onEdgeChange
Fires when the dock moves to a new edge.
 (edge: Edge) => void —
onOffsetChange
Fires when the dock's offset along the edge changes.
 (offset: number) => void —
style
Additional inline styles for the wrapper.
 CSSProperties {}
className
Additional CSS class for the wrapper.
 string ''

The container exposes data-edge and data-orientation attributes so you can flip your layout from CSS without re-rendering.

Code Examples
tsx
import { SnapDock } from 'react-driftkit';

function App() {
  return (
    <SnapDock defaultEdge="left">
      <MyToolbar />
    </SnapDock>
  );
}
Types
typescript 
type Edge = 'left' | 'right' | 'top' | 'bottom';
type Orientation = 'vertical' | 'horizontal';

interface SnapDockProps {
  children: ReactNode;
  defaultEdge?: Edge;
  defaultOffset?: number;
  draggable?: boolean;
  snap?: boolean;
  edgePadding?: number;
  shadow?: boolean;
  onEdgeChange?: (edge: Edge) => void;
  onOffsetChange?: (offset: number) => void;
  style?: CSSProperties;
  className?: string;
}

Enjoying react-driftkit?

Star the repo on GitHub to help more devs discover it.

Star on GitHub