React
Use Insightcn in React applications.
Setup
Install insightcn:
npm install insightcnUsage
"use client";
import { captureRegistryEvent } from "@insightcn/sdk";
export function RegistryTracker() {
const handleInstall = async () => {
const request = new Request("https://your-registry.com/r/ui/button.json", {
method: "GET",
headers: { "user-agent": "node-fetch" },
});
await captureRegistryEvent(request, "your-api-key", "installed");
};
return <button onClick={handleInstall}>Install Button</button>;
}Server Components
In React Server Components, you can use the SDK directly:
import { captureRegistryEvent } from "@insightcn/sdk";
export default async function RegistryPage() {
// Server-side tracking
const request = new Request("https://your-registry.com/r/ui/button.json", {
method: "GET",
headers: { "user-agent": "node-fetch" },
});
await captureRegistryEvent(request, "your-api-key", "installed");
return <div>Registry tracked</div>;
}Custom Hook
You can create a custom hook for reusable tracking:
"use client";
import { useCallback } from "react";
import { captureRegistryEvent, generateRegistryRssFeed } from "@insightcn/sdk";
export function useRegistryTracker(apiKey: string) {
const trackEvent = useCallback(
async (
registryUrl: string,
type: "installed" | "viewed" | "downloaded" = "installed"
) => {
const request = new Request(registryUrl, {
method: "GET",
headers: { "user-agent": "node-fetch" },
});
await captureRegistryEvent(request, apiKey, type);
},
[apiKey]
);
const generateRss = useCallback(
async (options: Parameters<typeof generateRegistryRssFeed>[0]) => {
return generateRegistryRssFeed(options);
},
[]
);
return { trackEvent, generateRss };
}