@wherdkit/react

@wherdkit/react

Wherd SDK for React (web) — drop-in in-app feedback, feature voting, and a "What's New" changelog. Themeable, with a fully headless escape hatch.

npm install @wherdkit/react

Quick start

import { WherdProvider, MessagesWidget } from "@wherdkit/react";

export function App() {
  return (
    <WherdProvider
      publicKey="pk_your_key"          // from the Wherd dashboard → Settings → API keys
      apiUrl="https://api.wherd.io"
      user={{ id: "user_123", email: "a@b.com", name: "Ada" }} // optional
    >
      <YourApp />
      <MessagesWidget />               {/* floating launcher + tabbed panel */}
    </WherdProvider>
  );
}

That's it — a feedback button appears, and submissions show up in your dashboard.

Components

• <MessagesWidget /> — floating icon launcher + modal with tabs (Feedback · Ideas · What's New)
• <MessagesFAB label?="Feedback" /> — just the launcher (icon by default; pass label for a pill)
• <FeatureBoard /> — feature requests + upvoting
• <WhatsNew /> — changelog feed (marks entries read on view)

Theming

<WherdProvider
  theme={{ colorScheme: "system", colors: { primary: "#16a34a" }, radius: 16 }}
  ...
/>

Theme merges over the server-driven config you set in the dashboard, so you can also restyle without shipping a release.

Headless

Every component is built on exported hooks — skip the UI and build your own:

import { useWherd, useComposer, useFeatureRequests, useChangelog, useUnreadChangelog } from "@wherdkit/react";

const wherd = useWherd();
wherd.open("changelog");                 // open any view programmatically
const unread = useUnreadChangelog();    // badge count

MIT licensed. Part of Wherd.