MicroFeedback React

React components for embedding MicroFeedback widgets in your application.

Installation

npm install microfeedback-react
# or
yarn add microfeedback-react
# or
pnpm add microfeedback-react
# or
bun add microfeedback-react

Quick Start

Basic Usage

import { MicroFeedbackWidget } from 'microfeedback-react';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <MicroFeedbackWidget
        apiKey="your-api-key"
        widgetId="your-widget-id"
        baseUrl="http://localhost:3000/embed" // Your MicroFeedback server URL
        theme="auto"
        position="bottom-right"
        onLoad={() => console.log('Widget loaded')}
        onSubmit={(data) => console.log('Feedback submitted:', data)}
      />
    </div>
  );
}

With Provider (for multiple widgets)

import { MicroFeedbackProvider, MicroFeedbackWidget } from 'microfeedback-react';

function App() {
  return (
    <MicroFeedbackProvider
      apiKey="your-api-key"
      baseUrl="http://localhost:3000/embed"
      theme="auto"
    >
      <div>
        <h1>My App</h1>
        <MicroFeedbackWidget
          widgetId="widget-1"
          position="bottom-right"
        />
        <MicroFeedbackWidget
          widgetId="widget-2"
          position="bottom-left"
        />
      </div>
    </MicroFeedbackProvider>
  );
}

Props

MicroFeedbackWidget

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiKey | string | Yes* | - | Your MicroFeedback API key | | widgetId | string | Yes | - | The widget ID to display | | baseUrl | string | Yes* | - | Your MicroFeedback server URL | | theme | "light" \| "dark" \| "auto" | No | "auto" | Widget theme | | position | "bottom-right" \| "bottom-left" \| "top-right" \| "top-left" | No | "bottom-right" | Widget position | | onLoad | () => void | No | - | Called when widget loads | | onError | (error: EmbedError) => void | No | - | Called when an error occurs | | onSubmit | (data: { feedback: string }) => void | No | - | Called when feedback is submitted | | onShow | () => void | No | - | Called when widget is shown | | onHide | () => void | No | - | Called when widget is hidden | | initiallyVisible | boolean | No | true | Whether widget should be visible initially |

*Required unless provided via MicroFeedbackProvider

MicroFeedbackProvider

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiKey | string | Yes | - | Your MicroFeedback API key | | baseUrl | string | Yes | - | Your MicroFeedback server URL | | theme | "light" \| "dark" \| "auto" | No | "auto" | Default theme for all widgets | | onError | (error: EmbedError) => void | No | - | Global error handler |

Examples

Next.js App Router

// app/page.tsx
'use client';

import { MicroFeedbackWidget } from 'microfeedback-react';

export default function HomePage() {
  return (
    <main>
      <h1>Welcome to my app</h1>
      <MicroFeedbackWidget
        apiKey="mk_dev_your_api_key"
        widgetId="your_widget_id"
        baseUrl="http://localhost:3000/embed"
        onSubmit={(data) => {
          console.log('Feedback received:', data.feedback);
        }}
      />
    </main>
  );
}

Next.js Pages Router

// pages/index.tsx
import { MicroFeedbackWidget } from 'microfeedback-react';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MicroFeedbackWidget
        apiKey="mk_dev_your_api_key"
        widgetId="your_widget_id"
        baseUrl="http://localhost:3000/embed"
      />
    </div>
  );
}

Vite + React

// src/App.tsx
import { MicroFeedbackWidget } from 'microfeedback-react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>My Vite App</h1>
      </header>
      <MicroFeedbackWidget
        apiKey="mk_dev_your_api_key"
        widgetId="your_widget_id"
        baseUrl="http://localhost:3000/embed"
        theme="dark"
        position="top-right"
      />
    </div>
  );
}

export default App;

Troubleshooting

Widget not loading

1. Check the console for errors - The widget will log detailed error information
2. Verify your API key - Make sure it's correct and has the right permissions
3. Check the baseUrl - Ensure it points to your MicroFeedback server
4. Verify the widget ID - Make sure the widget exists and is enabled

Common Issues

"Failed to connect to MicroFeedback API"

• Check that your server is running
• Verify the baseUrl is correct
• Check for CORS issues

"Invalid API key"

• Verify your API key is correct
• Check that the API key has permission to access the widget

"Widget not found"

• Verify the widget ID is correct
• Check that the widget is enabled for embedding

TypeScript Support

This package includes full TypeScript definitions. All components and hooks are fully typed.

import type { EmbedError, EmbedConfig } from 'microfeedback-react';

const handleError = (error: EmbedError) => {
  console.error('Widget error:', error.message, error.code);
};

License

MIT