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
import { MovableLauncher } from '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