@faqapp/react

bun add @faqapp/react @faqapp/core

@faqapp/react adds React hooks and SSR helpers on top of @faqapp/core. Same auth, same envelope, same types.

Provider

Wrap your tree once:

import { FAQClientProvider } from "@faqapp/react";

export function App({ children }) {
  return (
    <FAQClientProvider
      organizationSlug="acme"
      apiKey={import.meta.env.PUBLIC_FAQAPP_KEY}
    >
      {children}
    </FAQClientProvider>
  );
}

For server-side rendering, pass the API key from a server boundary. For browser-only apps with a public read-scope key, the same provider works.

Hooks

import { useFaq } from "@faqapp/react";

function QuestionList() {
  const { data, loading, error } = useFaq().questions.list({ limit: 20 });

  if (loading) return <div>Loading…</div>;
  if (error) return <div>{error.message}</div>;

  return data?.map((q) => (
    <article key={q.id}>
      <h2>{q.title}</h2>
      <p>{q.answer}</p>
    </article>
  ));
}

Hooks return { data, loading, error, refetch }. Calls are cached per-arg-shape; identical calls in the same render reuse the response.

Shipped components

For drop-in surfaces:

import { FaqList } from "@faqapp/react";

<FaqList limit={20} className="my-faq" />

<FaqList> is unstyled markup with className hooks; bring your own styles. Useful when you want the data flow but not the visual decisions.

Migration from @faqapp/nextjs

@faqapp/nextjs is deprecated. The migration path:

- import { useFaq } from "@faqapp/nextjs/hooks";
+ import { useFaq } from "@faqapp/react";

API surface is identical. The Next-specific server helpers map 1:1 to TanStack Start server functions or a thin server-only wrapper around @faqapp/core.