@1mn/react

React bindings for the 1mn SDK — embedded product analytics, error tracking, and user management (PostHog/Sentry-like) for your React or Next.js app.

Self-contained: it bundles the SDK core, so npm install + one provider is all you need. No snippet, no script tag.

• 📈 Analytics — automatic pageviews (incl. SPA navigations), sessions, web vitals, and custom events.
• 👥 User management — identify your signed-in users (with email) and watch them in your 1mn dashboard.
• 🐛 Errors — uncaught exceptions and unhandled rejections captured and grouped automatically.
• 💬 Feedback — a drop-in <FeedbackWidget> (or headless hook) that files customer feedback as tickets.
• 🪶 ~9 KB, zero runtime dependencies, SSR-safe.

Install

npm install @1mn/react

Quickstart

Wrap your app once with OnemnProvider and pass your public key (1mn_pk_…, from the Users tab in your 1mn dashboard) plus your signed-in user:

import { OnemnProvider } from "@1mn/react";

export default function App({ children, user }) {
  return (
    <OnemnProvider apiKey="1mn_pk_xxx" user={user}>
      {children}
    </OnemnProvider>
  );
}

That's it — pageviews, web vitals, and errors are captured automatically, and user is identified (with email/name) whenever it's set. When user becomes null (logout) the SDK resets.

Custom events

import { useOnemn } from "@1mn/react";

function CheckoutButton() {
  const onemn = useOnemn();
  return (
    <button onClick={() => onemn.capture("checkout_started", { plan: "pro" })}>
      Upgrade
    </button>
  );
}

Customer feedback

Collect in-app feedback with one component. Drop in the widget for a floating launcher + modal:

import { FeedbackWidget } from "@1mn/react";

<FeedbackWidget />;

Or drive the modal from your own button (no launcher):

import { useState } from "react";
import { FeedbackWidget } from "@1mn/react";

function Sidebar() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Feedback</button>
      <FeedbackWidget launcher={false} open={open} onOpenChange={setOpen} />
    </>
  );
}

Prefer your own UI? Use the headless hook (or useOnemn().feedback):

import { useFeedback } from "@1mn/react";

const { send } = useFeedback();
send("Love the new dashboard!");

Each submission emits a $feedback event. In your 1mn dashboard these are filed as feedback tickets in your backlog for triage — they never trigger an autonomous agent run on their own.

Next.js (App Router)

OnemnProvider is a client component — render it in a "use client" boundary (e.g. a providers.tsx wrapped around children in your root layout). It's SSR-safe: nothing runs until the browser hydrates. <FeedbackWidget> is likewise a client component.

API

<OnemnProvider apiKey host? user? >

| Prop | Type | Notes | | -------- | ------------------------------------------------- | -------------------------------------------------- | | apiKey | string | Your public key (1mn_pk_…). Required. | | host | string | Ingest origin. Defaults to the 1mn collector. | | user | { id, email?, name? } \| null | Signed-in user. Identified when it has an email. |

useOnemn()

Returns { capture, identify, reset, set, feedback, optOut, optIn }. Stable across renders; SSR-safe (no-ops on the server and before init).

• capture(event, properties?) — a custom event.
• identify(id, set?, setOnce?) — usually unnecessary if you pass user to the provider.
• set(properties) — update person properties without re-identifying.
• feedback(message, properties?) — send an in-app feedback/support message.
• reset() — clear identity (logout); the provider does this for you when user clears.
• optOut() / optIn() — stop / resume sending.

<FeedbackWidget />

A drop-in feedback launcher + modal. All props optional:

| Prop | Type | Notes | | ------------------- | ------------------------------------- | ----------------------------------------------------------- | | launcher | boolean | Show the floating launcher button. Default true. | | open | boolean | Controlled open state. Omit for uncontrolled. | | onOpenChange | (open: boolean) => void | Open/close callback. | | label | string | Launcher text. Default "Feedback". | | title | string | Modal heading. Default "Send feedback". | | description | string | Sub-text under the heading. | | placeholder | string | Textarea placeholder. | | position | "bottom-right" \| "bottom-left" | Launcher corner. Default "bottom-right". | | accentColor | string | Primary button / launcher color. | | properties | Record<string, unknown> | Extra props merged into the $feedback event. | | onSubmit | (message: string) => void | Called after a successful send. |

useFeedback()

Returns { send(message, properties?) } for building your own feedback UI.

getOnemn()

The live client (or null on the server / before init), for non-component code.

Privacy

The SDK captures no DOM content (no autocapture, no session replay) and no IP-derived geo. It ships optOut(). You are the data controller for your end-users' data.

License

MIT — see LICENSE.