react-visual-feedback 1.0.0 → 1.1.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Murali
+Copyright (c) 2025 Murali Vvrsn Gurajapu
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md

@@ -1,26 +1,27 @@
-# Murali Feedback Widget React
+# React Visual Feedback
 
 A powerful, visual feedback collection tool for React applications. Users can select any element on your page, and the widget automatically captures a screenshot and context information.
 
 ## Features
 
 - 🎯 Visual element selection with hover highlighting
-- 📸 Automatic screenshot capture of selected elements
+- 📸 Automatic screenshot capture of selected elements with perfect CSS rendering
 - 📝 Feedback form with rich context
 - ⚡ Lightweight and performant
-- 🎨 Customizable styling
-- ⌨️ Keyboard shortcuts (Ctrl+Q to activate, Esc to cancel)
+- 🎨 Works with any CSS framework (Tailwind, Bootstrap, Material-UI, etc.)
+- ⌨️ Keyboard shortcuts (Ctrl+Q to activate, Esc to cancel, Ctrl+Enter to submit)
+- 🌓 Dark mode support
 
 ## Installation
 
 ```bash
-npm install murali-feedback-widget-react
+npm install react-visual-feedback
 ```
 
 **Important:** Import the CSS file in your application:
 
 ```jsx
-import 'murali-feedback-widget-react/dist/index.css';
+import 'react-visual-feedback/dist/index.css';
 ```
 
 ## Quick Start
@@ -29,8 +30,8 @@ import 'murali-feedback-widget-react/dist/index.css';
 
 ```jsx
 import React from 'react';
-import { FeedbackProvider } from 'murali-feedback-widget-react';
-import 'murali-feedback-widget-react/dist/index.css';
+import { FeedbackProvider } from 'react-visual-feedback';
+import 'react-visual-feedback/dist/index.css';
 
 function App() {
   const handleFeedbackSubmit = async (feedbackData) => {
@@ -56,7 +57,7 @@ export default App;
 ### 2. Add a feedback trigger button (optional)
 
 ```jsx
-import { useFeedback } from 'murali-feedback-widget-react';
+import { useFeedback } from 'react-visual-feedback';
 
 function FeedbackButton() {
   const { setIsActive } = useFeedback();
@@ -71,14 +72,16 @@ function FeedbackButton() {
 
 ## Usage
 
-### Keyboard Shortcut
-Press **Ctrl+Q** to activate the feedback widget. Press **Esc** to deactivate.
+### Keyboard Shortcuts
+- **Ctrl+Q** - Activate feedback mode
+- **Esc** - Cancel/deactivate
+- **Ctrl+Enter** - Submit feedback (when form is open)
 
 ### Programmatic Activation (Uncontrolled Mode)
 Use the `useFeedback` hook to control the widget programmatically:
 
 ```jsx
-import { useFeedback } from 'murali-feedback-widget-react';
+import { useFeedback } from 'react-visual-feedback';
 
 function MyComponent() {
   const { isActive, setIsActive } = useFeedback();
@@ -96,7 +99,7 @@ You can control the widget's active state from the parent component:
 
 ```jsx
 import React, { useState } from 'react';
-import { FeedbackProvider } from 'murali-feedback-widget-react';
+import { FeedbackProvider } from 'react-visual-feedback';
 
 function App() {
   const [isFeedbackActive, setIsFeedbackActive] = useState(false);
@@ -144,9 +147,20 @@ The main provider component that wraps your application.
     tagName: "div",
     id: "element-id",
     className: "element-classes",
-    xpath: "//div[@id='element-id']",
-    innerText: "Element text content",
-    attributes: { /* element attributes */ }
+    selector: "div.card > button.primary",
+    textContent: "Element text content",
+    position: {
+      x: 100,
+      y: 200,
+      width: 300,
+      height: 50
+    },
+    styles: {
+      backgroundColor: "rgb(255, 255, 255)",
+      color: "rgb(0, 0, 0)",
+      fontSize: "16px",
+      fontFamily: "Arial, sans-serif"
+    }
   },
   screenshot: "data:image/png;base64,...", // Base64 encoded screenshot
   url: "https://yourapp.com/current-page",
@@ -173,13 +187,16 @@ The widget comes with default styles, but you can customize them by targeting th
 .feedback-tooltip { /* Element info tooltip */ }
 .feedback-modal { /* Feedback form modal */ }
 .feedback-backdrop { /* Modal backdrop */ }
+.feedback-modal-content { /* Modal content container */ }
+.feedback-screenshot { /* Screenshot preview */ }
 ```
 
 ## Example Implementation
 
 ```jsx
 import React from 'react';
-import { FeedbackProvider, useFeedback } from 'murali-feedback-widget-react';
+import { FeedbackProvider, useFeedback } from 'react-visual-feedback';
+import 'react-visual-feedback/dist/index.css';
 
 function FeedbackButton() {
   const { isActive, setIsActive } = useFeedback();
@@ -191,15 +208,17 @@ function FeedbackButton() {
         position: 'fixed',
         bottom: '20px',
         right: '20px',
-        padding: '10px 20px',
-        background: '#007bff',
+        padding: '12px 24px',
+        background: isActive ? '#ef4444' : '#3b82f6',
         color: 'white',
         border: 'none',
-        borderRadius: '5px',
-        cursor: 'pointer'
+        borderRadius: '8px',
+        cursor: 'pointer',
+        fontWeight: 'bold',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
       }}
     >
-      {isActive ? 'Select Element...' : 'Report Bug'}
+      {isActive ? '✕ Cancel' : '💬 Report Issue'}
     </button>
   );
 }
@@ -217,7 +236,6 @@ function App() {
         alert('Thank you for your feedback!');
       }
     } catch (error) {
-      console.error('Failed to submit feedback:', error);
       alert('Failed to submit feedback. Please try again.');
     }
   };
@@ -241,9 +259,9 @@ export default App;
 1. User activates the widget (Ctrl+Q or button click)
 2. User hovers over elements to see them highlighted
 3. User clicks on the problematic element
-4. Widget captures a screenshot of the selected element
-5. Feedback form appears with element context pre-filled
-6. User enters their feedback and submits
+4. Widget captures a pixel-perfect screenshot of the selected element
+5. Feedback form appears with element context pre-filled and large screenshot preview
+6. User enters their feedback and submits (or presses Ctrl+Enter)
 7. Your `onSubmit` handler receives all the data
 
 ## Browser Support
@@ -253,13 +271,20 @@ export default App;
 - Safari: ✅
 - Opera: ✅
 
-Requires `html2canvas` for screenshot functionality.
+## Screenshot Capture
+
+The widget uses `html-to-image` library for accurate screenshot capture with fallback to `html2canvas`. This ensures:
+- Perfect CSS rendering including Tailwind, Bootstrap, and custom styles
+- Accurate colors, fonts, and layout
+- Support for gradients, shadows, and modern CSS features
+- High-resolution screenshots (2x pixel ratio)
 
 ## Dependencies
 
 - React ^16.8.0 || ^17.0.0 || ^18.0.0
 - react-dom ^16.8.0 || ^17.0.0 || ^18.0.0
-- html2canvas ^1.4.1
+- html-to-image ^1.11.13
+- html2canvas ^1.4.1 (fallback)
 - lucide-react ^0.263.1
 
 ## Local Development & Testing
@@ -285,13 +310,14 @@ npm install
 npm run dev
 ```
 
-The example app will open at `http://localhost:3000` with a fully working demo!
+The example app will open at `http://localhost:8080` with a fully working demo!
 
 ### What's Included
 
-- ✅ Complete working example with UI
-- ✅ Both controlled and uncontrolled mode examples
-- ✅ Interactive test elements (buttons, forms, images)
+- ✅ Complete working example with Tailwind CSS
+- ✅ Both light and dark mode support
+- ✅ Controlled and uncontrolled mode examples
+- ✅ Interactive test elements (buttons, forms, cards, gradients)
 - ✅ Console logging to see feedback data
 - ✅ Hot reload for fast development
 
@@ -305,7 +331,7 @@ See `example/README.md` for more details.
 
 ## License
 
-MIT © Murali
+MIT © 2025 Murali
 
 ## Contributing
 
@@ -318,4 +344,9 @@ https://github.com/Murali1889/react-feedback-widget/issues
 
 ## Author
 
-Murali
+**Murali**
+Email: murali.g@hyperverge.co
+
+---
+
+Made with ❤️ for better user feedback collection