Lightweight React User Changelog & Roadmap Feed
Integrate a native React-compatible product announcement and customer feedback widget. Engage your React users directly in-app.
Why Technical Teams Choose NanoLog for React
Official React SDK
Import <NanoLog /> component and useNanoLog() hook directly from @ahm-labs/nanolog/react.
State-Safe Mounting
Ensures the widget mounts safely once in React StrictMode, avoiding double-initialization bugs.
Cryptographic Security
Secure user voting with client-generated localStorage identification or signed backend HMACs.
How to Integrate inside React
Install our official @ahm-labs/nanolog SDK for React 18 & 19 hooks, concurrent rendering, and full bundler compatibility (Vite, Next.js, Turbopack). Load the NanoLog CDN script inside your app template to enable the unified widget panel.
Package Install Command
Define custom visitor parameters (like user pricing tier or organizational membership) in the initialization config context to deliver targeted changelogs.
import React from 'react';
import { NanoLog, useNanoLog } from '@ahm-labs/nanolog/react';
export default function App() {
return (
<div>
{/* Drop-in floating action button launcher */}
<NanoLog
appId="YOUR_APP_ID"
context={{
plan: 'starter'
}}
/>
</div>
);
}
// Or trigger programmatically from any custom button:
export function CustomChangelogButton() {
const { toggle, isOpen, unreadCount } = useNanoLog();
return (
<button onClick={toggle} className="updates-button">
What's New {unreadCount > 0 && <span>({unreadCount})</span>}
</button>
);
}Ready to engage React users?
Get started with our free tier (supporting up to 1,000 monthly active users). Set up release feeds, public voting pages, and real-time feedback forms in minutes.