@outseta/react 0.3.7 → 0.4.0

package/README.md

@@ -1,12 +1,12 @@
 # @outseta/react
 
-React components plus generated TanStack Query hooks for Outseta.
+React components plus generated data hooks for Outseta.
 
 ## Notes
 
-- The embed components depend on `window.Outseta`; load Outseta's script in your app shell before using `OutsetaProvider`.
+- The embed and widget button components depend on `window.Outseta`; load Outseta's script in your app shell before using `OutsetaProvider`.
 - In browser apps, create API clients with a user bearer `accessToken`, not API key credentials.
-- Generated hooks require a TanStack `QueryClientProvider` and an Outseta client passed through each hook's `request` option.
+- Generated hooks are backed by lightweight vanilla-React state (no `QueryClientProvider` required). Pass an Outseta client through each hook's `request` option. They fetch on mount and expose `refetch`, but do not cache, dedupe, or refetch in the background — bring your own data layer (e.g. TanStack Query) if you need that.
 - `ProtectedRoute` renders generic login/signup and manage-subscription CTAs by default. Replace them with `unauthenticated` and `accessDenied` props when your app needs custom UX.
 
 ## Outseta script
@@ -15,12 +15,70 @@ React components plus generated TanStack Query hooks for Outseta.
 <script>
   var o_options = {
     domain: "your-company.outseta.com",
-    load: "auth,nocode",
+    // Include the widget modules you render: auth, profile, support, emailList, leadCapture.
+    load: "auth,profile,support,emailList,leadCapture,nocode",
   };
 </script>
 <script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>
 ```
 
+## Headless widget primitives
+
+Components are intentionally unstyled and forward normal DOM props so you can use your own classes, labels, and layout. For design-system components, use `useOutseta()` directly and call `openLogin`, `openSignup`, `openProfile`, `openSupport`, `openEmailList`, or `openLeadCapture` from your own buttons. `EmailListForm` only supplies the Outseta form action; bring your own fields and any honeypot fields Outseta gives you.
+
+```tsx
+import {
+  EmailListButton,
+  EmailListEmbed,
+  EmailListForm,
+  LeadCaptureButton,
+  LoginButton,
+  ProfileButton,
+  SignupButton,
+  SupportButton,
+  SupportEmbed,
+  useOutseta,
+} from "@outseta/react";
+
+function MarketingPage() {
+  const { openSupport } = useOutseta();
+
+  return (
+    <>
+      <LoginButton className="btn btn-secondary" />
+      <SignupButton className="btn btn-primary">Start free trial</SignupButton>
+      <ProfileButton className="link-button" options={{ tab: "billing" }}>
+        Billing
+      </ProfileButton>
+
+      <LeadCaptureButton formUid="z9M0zBQ4" className="btn">
+        Request a demo
+      </LeadCaptureButton>
+      <EmailListButton emailListUid="vW5xMZ94" className="btn">
+        Join the list
+      </EmailListButton>
+      <SupportButton className="btn">Contact support</SupportButton>
+
+      <button type="button" onClick={() => openSupport()}>
+        Open support from my own button
+      </button>
+
+      <SupportEmbed className="support-panel" />
+      <EmailListEmbed emailListUid="vW5xMZ94" className="newsletter-card" />
+
+      <EmailListForm
+        domain="your-company.outseta.com"
+        emailListUid="vW5xMZ94"
+        className="newsletter-form"
+      >
+        <input name="Email" type="email" required />
+        <button type="submit">Subscribe</button>
+      </EmailListForm>
+    </>
+  );
+}
+```
+
 ## Generated hook request client
 
 ```tsx
@@ -31,7 +89,19 @@ const client = createClient({
   accessToken,
 });
 
-const accounts = useAccountGetAllAccounts(undefined, {
-  request: client,
-});
+function Accounts() {
+  const { data, error, isLoading, refetch } = useAccountGetAllAccounts(
+    undefined,
+    { request: client },
+  );
+
+  if (isLoading) return <p>Loading…</p>;
+  if (error) return <p>Something went wrong</p>;
+
+  return (
+    <button type="button" onClick={() => refetch()}>
+      Reload {data?.length ?? 0} accounts
+    </button>
+  );
+}
 ```