Star on GitHub

MovableLauncher

A draggable floating wrapper that lets users pick up any widget and drop it anywhere on the viewport — or snap it to the nearest corner on release.

InstallDemoAPIExamples
Installation
npm install react-driftkit
Interactive Demo
Position
Snap to Corners
on
Behaviour
Widget will snap to the nearest corner on release
API Reference
Prop Type Default
children
Content rendered inside the draggable container.
 ReactNode —
defaultPosition
Initial position. Corner string ('top-left', 'top-right', 'bottom-left', 'bottom-right') or coordinates.
 Corner | { x, y } 'bottom-right'
snapToCorners
When true, animates to the nearest corner on release.
 boolean false
style
Additional inline styles for the wrapper.
 CSSProperties {}
className
Additional CSS class for the wrapper.
 string ''
Code Examples
tsx
import { MovableLauncher } from 'react-driftkit';

function App() {
  return (
    <MovableLauncher>
      <div className="my-widget">Hello World</div>
    </MovableLauncher>
  );
}
Types
typescript 
type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

interface Position {
  x: number;
  y: number;
}

interface MovableLauncherProps {
  children: ReactNode;
  defaultPosition?: Corner | Position;
  snapToCorners?: boolean;
  style?: CSSProperties;
  className?: string;
}

Enjoying react-driftkit?

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

Star on GitHub