Repository files navigation

A React library to capture and display events in a user-friendly interface. This library provides components to log, view, and manage events in your React application.

• 🚀 Features
• 📦 Installation
• ⚙️ Compatibility
• 🛠 Usage
  • Basic Setup
  • Setting Up the Service Worker
  • Where to Place the File
• 📝 Capturing Events
• 🗑 Clearing Events
• 📊 Possible Use Cases
• 📚 Examples
  • Basic Example
  • Advanced Example
• 📄 License

• Capture and display events in real-time
• Switch between individual event view and table view
• Clear all captured events
• Responsive and interactive UI

Install the library using npm:

npm install react-capture-events

or yarn:

yarn add react-capture-events

The react-capture-events library is compatible with the following versions of React:

• React 17.x
• React 18.x

1. Register the Service Worker

   Register the service worker to enable event capturing:

   import{registerServiceWorker}from'react-capture-events'registerServiceWorker()

2. Wrap Your Application with the Provider

   Wrap your application with the CaptureEventProvider to provide context for capturing events:

   importReactfrom'react'importReactDOMfrom'react-dom'import{CaptureEventProvider}from'react-capture-events'importAppfrom'./App'ReactDOM.render(<CaptureEventProvider><App/></CaptureEventProvider>,document.getElementById('root'),)

3. Use the CapturedEventsList Component

   Add the CapturedEventsList component to your application to display the captured events:

   importReactfrom'react'import{CapturedEventsList}from'react-capture-events'constApp=()=>(<div><h1>My Application</h1><CapturedEventsList/></div>)exportdefaultApp

To ensure event capturing works correctly, you need to set up the service worker. Create a file namedsw.js and add the following code:

letevents=[]self.addEventListener('install',(event)=>{console.log('Service Worker installed')event.waitUntil(self.skipWaiting())})self.addEventListener('activate',(event)=>{console.log('Service Worker activated')event.waitUntil(self.clients.claim())})self.addEventListener('message',(event)=>{if(event.data.type==='LOG_EVENT'){constnewEvent={eventName:event.data.eventName,eventData:event.data.eventData,timestamp:newDate().toISOString(),}events.push(newEvent)if(events.length>100){events.shift()}}if(event.data.type==='GET_EVENTS'){event.source.postMessage({type:'EVENTS_LIST', events})}if(event.data.type==='CLEAR_EVENTS'){events=[]event.source.postMessage({type:'EVENTS_CLEARED'})}})

Place thesw.js file at the root of your project. Make sure to register it correctly using the code shown in the Basic Setup section to ensure the service worker is active and ready to capture events.

To capture events, send messages to the service worker:

navigator.serviceWorker.controller.postMessage({type:'LOG_EVENT',eventName:'MyEvent',eventData:{key:'value'},})

To clear all captured events, send aCLEAR_EVENTS message to the service worker:

navigator.serviceWorker.controller.postMessage({type:'CLEAR_EVENTS',})

The React Capture Events library can be applied in various scenarios where capturing, visualizing, and managing events is required. The implementation of these use cases should be done in conjunction with appropriate tools and workflows to handle specific requirements, such as logging, analysis, or integration with other systems. Below are some potential use cases:

1. Application Debugging and MonitoringCapture user interactions and system events in real-time to simplify debugging and application monitoring during development.

2. User Behavior AnalysisCollect user interaction data, such as clicks and page navigation, to gain insights into user behavior and enhance the user experience.

3. Automated TestingCapture events during automated tests to verify if all expected interactions are triggered correctly during integration or end-to-end testing.

4. Event Auditing and LoggingImplement event logging for compliance and security, maintaining a detailed history of user actions, such as configuration changes or access to sensitive data.

5. Feedback and Customer SupportProvide detailed event logs to support teams, helping to resolve user issues more efficiently by capturing relevant events, including errors.

6. Performance AnalysisCapture performance-related events like page and component load times to identify bottlenecks and areas for improvement.

7. Educational ApplicationsTrack user progress and interactions on educational platforms to provide personalized learning experiences and feedback to learners.

importReactfrom'react'import{CaptureEventProvider,CapturedEventsList}from'react-capture-events'functionApp(){return(<CaptureEventProvider><div><h1>Event Capture Example</h1><CapturedEventsList/></div></CaptureEventProvider>)}exportdefaultApp

importReact,{useEffect}from'react'import{CaptureEventProvider,CapturedEventsList,captureEvent,}from'react-capture-events'functionApp(){useEffect(()=>{// Simulate capturing an eventcaptureEvent({type:'click',message:'Button clicked'})},[])return(<CaptureEventProvider><div><h1>Advanced Event Capture Example</h1><buttononClick={()=>captureEvent({type:'click',message:'Button clicked'})}>          Click Me</button><CapturedEventsList/></div></CaptureEventProvider>)}exportdefaultApp

This project is licensed under the MIT License. See theLICENSE file for details.