React Flow

LearnReferenceExamplesComponentsShowcase
GitHubDiscordReact Flow Pro
  • API Reference
  • <ReactFlow />
  • <ReactFlowProvider />
  • Components
    • <Background />
    • <BaseEdge />
    • <ControlButton />
    • <Controls />
    • <EdgeLabelRenderer />
    • <EdgeText />
    • <Handle />
    • <MiniMap />
    • <NodeResizer />
    • <NodeResizeControl />
    • <NodeToolbar />
    • <Panel />
    • <ViewportPortal />
  • Hooks
    • useConnection()
    • useEdges()
    • useEdgesState()
    • useHandleConnections()
    • useNodeConnections()
    • useKeyPress()
    • useNodeId()
    • useNodes()
    • useInternalNode()
    • useNodesData()
    • useNodesInitialized()
    • useNodesState()
    • useOnSelectionChange()
    • useOnViewportChange()
    • useReactFlow()
    • useStore()
    • useStoreApi()
    • useUpdateNodeInternals()
    • useViewport()
  • Types
    • BackgroundVariant
    • Connection
    • ConnectionLineComponentProps
    • ConnectionLineType
    • ConnectionState
    • CoordinateExtent
    • DefaultEdgeOptions
    • DeleteElements
    • Edge
    • EdgeChange
    • EdgeMarker
    • EdgeProps
    • FitViewOptions
    • Handle
    • HandleConnection
    • NodeConnection
    • InternalNode
    • MarkerType
    • MiniMapNodeProps
    • Node
    • NodeChange
    • NodeHandle
    • NodeOrigin
    • NodeProps
    • OnEdgesChange
    • OnNodesChange
    • PanOnScrollMode
    • PanelPosition
    • Position
    • ProOptions
    • ReactFlowInstance
    • ReactFlowJsonObject
    • ResizeParams
    • Viewport
    • XYPosition
  • Utils
    • addEdge()
    • applyEdgeChanges()
    • applyNodeChanges()
    • getBezierPath()
    • getConnectedEdges()
    • getIncomers()
    • getNodesBounds()
    • getOutgoers()
    • getSimpleBezierPath()
    • getSmoothStepPath()
    • getStraightPath()
    • getViewportForBounds()
    • isEdge()
    • isNode()
    • reconnectEdge()
    • getTransformForBounds()
Question? Give us feedback →Edit this page

What's new?

React Flow 12.4.3React Flow 12.4.2React Flow 12.4.1...and more!
ReferenceTypes
PanelPosition

PanelPosition

Source on GitHub

This type is mostly used to help position things on top of the flow viewport. For example both the <MiniMap /> and <Controls /> components take a position prop of this type.

export type PanelPosition =
  | 'top-left'
  | 'top-center'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-center'
  | 'bottom-right';
TypesgetTransformForBounds()

A project by the xyflow team

We are building and maintaining open source software for node-based UIs since 2019.

Docs

Getting StartedAPI ReferenceExamplesShowcase

Social

DiscordGithubX / TwitterBluesky

xyflow

BlogOpen SourceAboutContact
Careers hiring

Legal

MIT LicenseCode of ConductImprint

info@xyflow.com — Copyright © 2025 webkid GmbH. All rights reserved — website design by Facu Montanaro