npm package: @myappsinsight/react
Description: React components for MyAppsInsight feedback widget
Latest version: 0.1.1

# @myappsinsight/react

React components for integrating MyAppsInsight feedback widget in React and Next.js applications.

## Installation

```bash
npm install @myappsinsight/react
# or
yarn add @myappsinsight/react
# or
pnpm add @myappsinsight/react
```

## Quick Start

### 1. Wrap your app with the provider

```tsx
import { MyAppsInsightProvider } from '@myappsinsight/react'

function App() {
  return (
    <MyAppsInsightProvider
      apiKey="your-api-key"
      apiUrl="https://api.ragopor.com"
    >
      {/* Your app content */}
    </MyAppsInsightProvider>
  )
}
```

### 2. Add the widget component

```tsx
import { MyAppsInsightWidget } from '@myappsinsight/react'

function YourPage() {
  return (
    <>
      <h1>Your Page Content</h1>
      <MyAppsInsightWidget />
    </>
  )
}
```

## Next.js Integration

### App Router

```tsx
// app/layout.tsx
import { MyAppsInsightProvider } from '@myappsinsight/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MyAppsInsightProvider apiKey="your-api-key">
          {children}
        </MyAppsInsightProvider>
      </body>
    </html>
  )
}
```

### Pages Router

```tsx
// pages/_app.tsx
import { MyAppsInsightProvider } from '@myappsinsight/react'

export default function MyApp({ Component, pageProps }) {
  return (
    <MyAppsInsightProvider apiKey="your-api-key">
      <Component {...pageProps} />
    </MyAppsInsightProvider>
  )
}
```

### Client-Only Rendering

For SSR frameworks, you may want to render the widget only on the client:

```tsx
import dynamic from 'next/dynamic'

const MyAppsInsightWidget = dynamic(
  () => import('@myappsinsight/react').then(mod => mod.MyAppsInsightWidget),
  { ssr: false }
)
```

## API Reference

### MyAppsInsightProvider

Provider component that manages widget state and configuration.

```tsx
<MyAppsInsightProvider
  apiKey="required-api-key"
  apiUrl="https://api.myappsinsight.com"
  config={{
    position: 'bottom-right',
    theme: 'auto',
    user: {
      email: 'user@example.com',
      name: 'John Doe',
    },
    metadata: {
      version: '1.0.0',
      environment: 'production',
    },
    debug: false,
    captureConsoleErrors: true,
    captureNetworkErrors: true,
  }}
>
  {children}
</MyAppsInsightProvider>
```

### MyAppsInsightWidget

Widget component that renders the feedback button and form.

```tsx
<MyAppsInsightWidget
  position="bottom-right"  // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  theme="auto"            // 'light' | 'dark' | 'auto'
  hideDefaultButton={false}
  customButton={<CustomButton />}
/>
```

### useMyAppsInsight Hook

Hook for programmatic control of the widget.

```tsx
const {
  // State
  isOpen,
  isLoading,
  error,
  
  // Methods
  openFeedback,
  closeFeedback,
  submitFeedback,
  captureScreenshot,
  updateUser,
  updateMetadata,
  
  // Config
  config,
} = useMyAppsInsight()
```

## Examples

### Custom Trigger Button

```tsx
function CustomFeedbackTrigger() {
  const { openFeedback } = useMyAppsInsight()
  
  return (
    <button onClick={openFeedback}>
      Report an Issue
    </button>
  )
}
```

### Programmatic Submission

```tsx
function QuickBugReport() {
  const { submitFeedback, captureScreenshot } = useMyAppsInsight()
  
  const handleQuickReport = async () => {
    const screenshot = await captureScreenshot()
    
    await submitFeedback({
      type: 'bug',
      title: 'Quick Bug Report',
      description: 'Something went wrong on this page',
      screenshot,
    })
  }
  
  return <button onClick={handleQuickReport}>Quick Bug Report</button>
}
```

### Update User Context

```tsx
function UserProfile() {
  const { updateUser } = useMyAppsInsight()
  
  useEffect(() => {
    // Update user info when it changes
    updateUser({
      email: currentUser.email,
      name: currentUser.name,
      id: currentUser.id,
    })
  }, [currentUser])
  
  return <div>...</div>
}
```

### Custom Styled Widget

```tsx
<MyAppsInsightWidget
  customButton={
    <div className="custom-feedback-button">
      <Icon name="feedback" />
      <span>Send Feedback</span>
    </div>
  }
/>
```

## TypeScript Support

This package is written in TypeScript and includes type definitions out of the box.

```tsx
import type { FeedbackData, MyAppsInsightConfig } from '@myappsinsight/react'
```

## Browser Support

- Chrome, Firefox, Safari, Edge (latest versions)
- React 16.8+ (requires hooks support)
- Next.js 12+

## Migration from Vanilla Widget

If you're currently using the vanilla JavaScript widget in a React app:

1. Remove the script tag loading `widget.js`
2. Install `@myappsinsight/react`
3. Wrap your app with `MyAppsInsightProvider`
4. Add `MyAppsInsightWidget` component
5. Update any custom integrations to use the `useMyAppsInsight` hook

## License

MIT