Expand and Collapse
This example demonstrates how to implement expandable and collapsible nodes in a
hierarchical tree structure. Nodes with children can be expanded or collapsed by clicking
on them, revealing or hiding their descendants. The implementation uses a custom
useExpandCollapse hook that maintains the complete graph structure while only rendering
the currently visible portions.
About this Pro Example
- Dependencies: @xyflow/react , @dagrejs/dagre
- Implements a reusable
useExpandCollapsehook that handles visibility logic - Demonstrates dynamic node addition with automatic layout recalculation
- Uses node data properties to track expanded/collapsed state
- Provides interactive controls to expand/collapse nodes and add children
- License: xyflow Pro License
Last updated on