NPM Package & React SDK

The official @ahm-labs/nanolog package provides first-class TypeScript types, Next.js App Router support, and React components/hooks for integrating NanoLog in modern web applications.

It wraps the isolated, zero-CSS-bleed <nanolog-widget> Web Component in a lightweight (< 2KB), tree-shakeable bundle that handles client-side script loading, SSR hydration safety, and programmatic modal controls.

Installation

Install the package via your preferred package manager:

npm install @ahm-labs/nanolog

pnpm add @ahm-labs/nanolog

yarn add @ahm-labs/nanolog

React & Next.js Quickstart

1. Drop-in `<NanoLog />` Component

Place the <NanoLog /> component in your root layout or root provider. It automatically handles async script injection and initializes the floating launcher button.

// app/providers.tsx or app/layout.tsx
'use client';

import { NanoLog } from '@ahm-labs/nanolog/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <NanoLog
        appId={process.env.NEXT_PUBLIC_NANOLOG_APP_ID!}
        context={{
          plan: 'pro',
          role: 'admin',
          userId: 'usr_98124'
        }}
      />
    </>
  );
}

2. Custom Navbar Trigger with `useNanoLog()`

If you want to trigger the changelog and roadmap drawer from your own navbar, settings menu, or bell icon instead of the default floating action button:

'use client';

import { useNanoLog } from '@ahm-labs/nanolog/react';
import { Bell } from 'lucide-react';

export function ChangelogButton() {
  const { toggle, isOpen } = useNanoLog();

  return (
    <button
      onClick={toggle}
      className="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-slate-200 text-sm font-medium hover:bg-slate-50 transition-colors"
      aria-label="View changelog and product roadmap"
    >
      <Bell className="w-4 h-4 text-indigo-600" />
      <span>Updates</span>
    </button>
  );
}

To hide the default floating button when using a custom trigger, set hideDefaultTrigger={true} on <NanoLog /> or pass hideDefaultTrigger: true to the config:

<NanoLog
  appId="YOUR_APP_ID"
  hideDefaultTrigger
/>

3. Declarative `<NanoLogTrigger>` Component

You can also wrap any custom UI element in <NanoLogTrigger>:

import { NanoLogTrigger } from '@ahm-labs/nanolog/react';

export function Navigation() {
  return (
    <nav>
      <NanoLogTrigger action="toggle">
        <button className="btn-primary">What's New</button>
      </NanoLogTrigger>
    </nav>
  );
}

Vanilla JavaScript & TypeScript

For Vite, Vanilla TS, Astro, or non-React single-page applications, import the core functions directly:

import { initNanoLog, openNanoLog, toggleNanoLog } from '@ahm-labs/nanolog';

// Initialize when your application mounts
initNanoLog({
  appId: '0821139e-8d66-4878-bfaf-4e47865b4c88',
  context: {
    plan: 'enterprise',
    tier: 'premium'
  }
});

// Bind to any DOM element
document.querySelector('#changelog-btn')?.addEventListener('click', () => {
  toggleNanoLog();
});

Secure Identity & User Segmentation

If you are passing sensitive user identifiers or email addresses for user feedback attribution, generate an HMAC-SHA256 signature on your server and pass it in the user context:

<NanoLog
  appId={process.env.NEXT_PUBLIC_NANOLOG_APP_ID!}
  context={{
    userId: currentUser.id,
    userEmail: currentUser.email,
    userHash: currentUser.nanologHmacHash, // Generated server-side with HMAC-SHA256
    plan: currentUser.subscriptionTier
  }}
/>

For full details on HMAC signature generation and secret keys, see our Secure Identity Documentation.

Configuration Reference (`NanoLogConfig`)

Core Methods Reference

TypeScript Support

Full TypeScript definitions are bundled with the package:

import type { NanoLogConfig, WidgetContext, NanoLogInstance } from '@ahm-labs/nanolog';