Insightcn

React

Use Insightcn in React applications.

Setup

Install insightcn:

npm install insightcn

Usage

"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 };
}

On this page