📣 Take the 2024 Svelte Flow Developer Survey

Svelte Flow

LearnReferenceExamples
GitHubDiscordSupport Us
  • API Reference
  • <SvelteFlow />
  • <SvelteFlowProvider />
  • Components
    • <Background />
    • <BaseEdge />
    • <ControlButton />
    • <Controls />
    • <EdgeLabelRenderer />
    • <EdgeLabel />
    • <Handle />
    • <MiniMap />
    • <NodeResizer />
    • <NodeResizeControl />
    • <NodeToolbar />
    • <Panel />
  • Hooks
    • useConnection()
    • useEdges()
    • useHandleConnections()
    • useInternalNode()
    • useNodes()
    • useNodesData()
    • useNodesInitialized()
    • useSvelteFlow()
    • useStore()
    • useUpdateNodeInternals()
  • Types
    • BackgroundVariant
    • ColorMode
    • Connection
    • ConnectionLineType
    • CoordinateExtent
    • DefaultEdgeOptions
    • Edge
    • EdgeMarker
    • EdgeProps
    • FitViewOptions
    • InternalNode
    • KeyDefinition
    • MarkerType
    • Node
    • NodeProps
    • NodeOrigin
    • PanelPosition
    • Position
    • SvelteFlowStore
    • Viewport
    • XYPosition
    • addEdge()
    • getBezierPath()
    • getConnectedEdges()
    • getIncomers()
    • getNodesBounds()
    • getOutgoers()
    • getSimpleBezierPath()
    • getSmoothStepPath()
    • getStraightPath()
    • getViewportForBounds()
    • isEdge()
    • isNode()

On This Page

  • Signature
Question? Give us feedback →Edit this pageWhat's new here?
ReferenceHooks
useConnection()

useConnection

Source on GitHub

The useConnection hook returns the current connection when there is an active connection interaction. If no connection interaction is active, it returns null for every property. A typical use case for this hook is to colorize handles based on a certain condition (e.g. if the connection is valid or not).

<script lang="ts">
  import { useConnection } from '@xyflow/svelte';
 
  const connection = useConnection();
</script>

Signature

NameType
#Returns
#
Connection
Hooks

A project by the xyflow team

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

Docs

Quickstart GuideAPI ReferenceExamplesShowcaseSupport Us

Social

DiscordGithubX / TwitterBluesky

xyflow

BlogOpen SourceAboutContact
Careers hiring

Legal

MIT LicenseCode of Conduct

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