@hearsay/react

React bindings for Hearsay — drop-in component, provider, hooks, and UI components for AI-powered in-product feedback.

Install

npm install @hearsay/react

@hearsay/react includes @hearsay/core as a dependency — no need to install it separately.

Quick start — Hearsay component

The simplest way to add Hearsay to your React app:

'use client'; // Required for Next.js App Router

import { Hearsay } from '@hearsay/react';

export default function HearsayWidget() {
  return (
    <Hearsay
      apiKey="hsk_pub_..."
    />
  );
}

The component handles init and cleanup automatically. All SDK configuration options are accepted as props. Config is read on initial mount; only apiKey changes trigger re-initialization.

HearsayProvider

For programmatic control via hooks, wrap your app with HearsayProvider:

import { HearsayProvider } from '@hearsay/react';

function App() {
  return (
    <HearsayProvider config={{
      apiKey: 'hsk_pub_...',
    }}>
      <YourApp />
    </HearsayProvider>
  );
}

Hooks

import { useHearsay, useIdentify, useHearsayEvent } from '@hearsay/react';

function FeedbackButton() {
  const hearsay = useHearsay();

  return (
    <button onClick={() => hearsay?.show({ question: 'How was checkout?' })}>
      Give feedback
    </button>
  );
}

Event listening

import { useHearsayEvent } from '@hearsay/react';

function Analytics() {
  useHearsayEvent((event) => {
    console.log('Hearsay event:', event.type);
  });

  return null;
}

Exports

• Hearsay — Drop-in component (no useEffect needed)
• HearsayProvider — Context provider for hooks
• useHearsay — Access the SDK instance, or null before client hydration
• useIdentify — Identify the current user
• useHearsayEvent — Subscribe to SDK events

Peer dependencies

• react >= 18

Related packages

• @hearsay/core — Main SDK

Links

• Dashboard
• GitHub

License

MIT