React Integration

Add FeedValue to your React application.

Installation

npm install @feedvalue/react

Basic Usage

import { FeedValueWidget } from '@feedvalue/react';

function App() {
  return (
    <div>
      <FeedValueWidget widgetId="wgt_abc123" />
    </div>
  );
}

Props

Prop	Type	Default	Description
widgetId	string	required	Your widget ID
position	string	'bottom-right'	Widget position
theme	string	'auto'	'light', 'dark', or 'auto'
primaryColor	string	-	Custom primary color
onOpen	function	-	Called when widget opens
onClose	function	-	Called when widget closes
onSubmit	function	-	Called after feedback submitted

Example with All Props

import { FeedValueWidget } from '@feedvalue/react';

function App() {
  return (
    <FeedValueWidget
      widgetId="wgt_abc123"
      position="bottom-left"
      theme="dark"
      primaryColor="#7c3aed"
      onSubmit={(feedback) => {
        console.log('Feedback submitted:', feedback);
      }}
    />
  );
}

Programmatic Control

import { useFeedValue } from '@feedvalue/react';

function FeedbackButton() {
  const { open, close, isOpen } = useFeedValue();

  return (
    <button onClick={open}>
      {isOpen ? 'Close' : 'Give Feedback'}
    </button>
  );
}

TypeScript Support

Full TypeScript support is included:

import type { FeedValueProps, FeedbackData } from '@feedvalue/react';

const handleSubmit = (feedback: FeedbackData) => {
  // feedback.message, feedback.sentiment, etc.
};

TIP

The React package automatically handles cleanup on unmount and prevents memory leaks.