🎪 Live Event Monitor

Interact with the tree to see events in real-time

Interactive Tree
Live Event Log
Event Log
0
No events yet. Interact with the tree to see events appear here.
Event Monitor Guide
🎯 How to Test Events:
  • 👆 Click nodes to trigger click events
  • 📂 Expand/collapse folders to see expand events
  • 🔍 Search to trigger search result events
  • 🤏 Drag & drop items to see drag events
  • ✅ Select nodes to see selection events
📊 Event Statistics:
Total events captured: 0
Log displays last 20 events
Events are captured in real-time

🔥 Core Events

Essential events fired by user interactions

Event Reference
EventTriggerEvent DetailDescription
nodeClickUser click{ id, data, path, level }Fired when user clicks on any part of a tree node
nodeExpandExpand/collapse{ id, expanded, children, level }Fired when a node's expanded state changes
nodeSelectSelection change{ id, selected, data, path }Fired when a node's selection state changes
nodeFocusKeyboard focus{ id, data, previousFocus }Fired when focus moves to a different node
Event Handling Examples
Core Event Handling 
 
 
Implementation Guide
 
🎯 Event Timing
 
Core events fire immediately when user interactions occur, allowing for real-time response.
 
📊 Event Detail Structure
 
All events include consistent data structure with node information, state changes, and context.
 
🔄 State Management
 
Use events to sync tree state with your application state management system (Redux, Zustand, etc.).
 
⚡ Performance Notes
 
  • Events are throttled for high-frequency actions
    •  
  • Event handlers should be lightweight
    •  
  • Use event delegation patterns for large trees
 
🤏 Drag & Drop Events
 
Events for drag and drop operations with detailed feedback
 
Drag Event Reference
 
EventPhaseEvent DetailUse Case
dragStartStart{ draggedNode, originalIndex }Initialize drag operation, show UI feedback
dragOverDuring{ draggedNode, targetNode, position }Validate drop target, show drop zones
dragEnterDuring{ draggedNode, targetNode }Highlight valid drop targets
dragLeaveDuring{ draggedNode, targetNode }Remove drop target highlights
dropEnd{ draggedNode, targetNode, newIndex, position }Execute the actual move operation
dragEndEnd{ draggedNode, success, canceled }Clean up drag UI, update state
 
Drag Event Implementation
 
Drag & Drop Events 
 
 
 
Drag & Drop Guide
 
🎯 Drag Operation Flow
 
  1. dragStart: User begins dragging
    2.  
  2. dragOver/dragEnter: Hovering over targets
    3.  
  3. drop: User releases on valid target
    4.  
  4. dragEnd: Operation completes
 
✅ Validation System
 
Use dragValidationCallback to implement business rules and prevent invalid drops.
 
🎨 Visual Feedback
 
Events provide hooks for custom drag indicators, drop zones, and animation feedback.
 
💾 Data Persistence
 
The drop event is the ideal place to update your data and sync with backends.
 
🔍 Search Events
 
Events fired during search operations with result details
 
Search Event Reference
 
EventTimingEvent DetailPurpose
searchStartBefore search{ query, timestamp }Show loading state
searchResultAfter search{ query, results, total, duration }Process search results
searchClearOn clear{ previousQuery, clearedResults }Reset search state
searchErrorOn error{ query, error, timestamp }Handle search errors
 
Search Implementation
 
Search Event Handling 
 
 
 
Search Integration
 
🚀 Async Search
 
Search operations are asynchronous and use FlexSearch for performance. Events provide hooks for loading states.
 
📊 Search Analytics
 
Events include timing and result metrics perfect for analytics and performance monitoring.
 
🎨 Result Highlighting
 
Use search events to implement custom highlighting and result navigation.
 
🔧 Custom Search Logic
 
Implement getSearchValueCallback to customize what data is searchable for each node.
 
⚡ Performance & Best Practices
 
Optimize event handling for large trees and complex applications
 
Best Practices
 
✅ Do's
 
  • Use event delegation for multiple trees
    •  
  • Debounce expensive operations in handlers
    •  
  • Keep event handlers lightweight
    •  
  • Use proper cleanup in component unmount
    •  
  • Batch DOM updates after multiple events
 
❌ Don'ts
 
  • Don't perform heavy computations in handlers
    •  
  • Don't make synchronous API calls
    •  
  • Don't manipulate DOM directly
    •  
  • Don't ignore event timing and order
    •  
  • Don't forget to handle edge cases
 
🔧 Memory Management
 
Always remove event listeners when components unmount to prevent memory leaks.
								Use weak references for node caching.
 
Optimization Examples
 
Performance Optimization 
 
 
 
Performance Guide
 
⚡ Event Performance
 
  • Events are optimized internally with throttling
    •  
  • Use debouncing for expensive handler operations
    •  
  • Batch DOM updates to avoid layout thrashing
 
🧠 Memory Management
 
  • Remove event listeners on component cleanup
    •  
  • Use weak references for caching
    •  
  • Clear timeouts and intervals
 
📊 Large Trees
 
  • Event delegation patterns for multiple trees
    •  
  • Lazy loading based on expand events
    •  
  • Virtual scrolling for huge datasets
 
🔧 Testing Events
 
Use synthetic events for testing event handlers without user interaction.