Frappe Doc Create Listener Added

[Abhishek-Chougule]

✨ Added useFrappeDocCreateListener Hook for Listening to New Document Creations

Description:
This PR introduces a new custom React hook, useFrappeDocCreateListener, which listens for real-time document creation events in Frappe via WebSockets.

🔹 Features & Functionality:
📡 Subscribes to doctype_subscribe to receive updates for a specific Frappe doctype.
⚡ Listens for doc_create events and triggers a callback when a new document is created.
👥 Tracks active document viewers using the doc_viewers event.
🔄 Handles automatic re-subscription when the socket reconnects.
🛑 Prevents multiple subscriptions using a useRef flag to avoid duplicate event listeners.
🧹 Proper cleanup on unmount to prevent memory leaks.
🔹 Hook Usage Example:

    import { useFrappeDocCreateListener } from "frappe-react-sdk";
    
    const MyComponent = () => {
      const handleNewDoc = (newDoc) => {
        console.log("New document created:", newDoc);
      };
    
      useFrappeDocCreateListener("Trade Entry", handleNewDoc);
    
      return <div>Listening for new Trade Entry documents...</div>;
    };

🔹 Why This Is Needed:
Currently, frappe-react-sdk lacks a dedicated hook for listening to new document creations in real-time.
This hook simplifies WebSocket event handling and ensures efficient subscription management.
🔹 Enhancements & Improvements:
Improves real-time data handling in Frappe-based React applications.
Reduces boilerplate code for WebSocket event listeners.
Ensures reliability by automatically re-subscribing after reconnections.
Checklist:
Tested in a Frappe-based React project.
Prevents duplicate subscriptions and ensures proper cleanup.
Includes a callback-based API for flexibility.
Looking forward to feedback and suggestions! 🚀

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
frappe-react-sdk	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2025 5:19am