Zoom Select

A zoom control that lets you zoom in and out seamlessly using a select dropdown.

Dependencies:

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui.reactflow.dev/zoom-select


pnpm dlx shadcn@latest add https://ui.reactflow.dev/zoom-select


yarn dlx shadcn@latest add https://ui.reactflow.dev/zoom-select


bun x shadcn@latest add https://ui.reactflow.dev/zoom-select

Usage

1. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
import { ZoomSelect } from "@/registry/components/zoom-select/";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: { label: "Node" },
  },
];
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} fitView>
        <Background />
        <ZoomSelect position="top-left" />
      </ReactFlow>
    </div>
  );
}