Official react npm package with typescript

It would be great if we could get an official react npm package that also has typescript. I believe this would make adoption far easier and give developers more confidence. Here’s an example of a react wrapper I wrote for my app.

"use client";

import Script from "next/script";
import React, {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useState,
} from "react";

interface FeaturebaseContextType {
  isLoaded: boolean;
  show: (pageName?: "home" | "messages" | "changelog" | "help") => void;
  showNewMessage: (initialText?: string) => void;
  showArticle: (articleId: string) => void;
  showChangelog: (entryId?: string) => void;
  showConversation: (conversationId: string) => void;
  hide: () => void;
  toggle: () => void;
  isVisible: boolean;
  setTheme: (theme: "light" | "dark") => void;
  setLanguage: (language: string) => void;
}

const FeaturebaseContext = createContext<FeaturebaseContextType | null>(null);

interface FeaturebaseProviderProps {
  children: React.ReactNode;
  appId: string;
  theme?: "light" | "dark";
  language?: string;
  onShow?: () => void;
  onHide?: () => void;
  onUnreadCountChange?: (unreadCount: number) => void;
}

export const FeaturebaseProvider: React.FC<FeaturebaseProviderProps> = ({
  children,
  appId,
  theme = "light",
  language = "en",
  onShow,
  onHide,
  onUnreadCountChange,
}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const win = window as any;

    // Initialize Featurebase if it doesn't exist
    if (typeof win.Featurebase !== "function") {
      win.Featurebase = function () {
        (win.Featurebase.q = win.Featurebase.q || []).push(arguments);
      };
    }

    // Boot Featurebase messenger with configuration
    win.Featurebase("boot", {
      appId,
      theme,
      language,
      hide: true,
    });

    win.Featurebase("onShow", () => {
      setIsVisible(true);
      onShow?.();
    });

    win.Featurebase("onHide", () => {
      setIsVisible(false);
      onHide?.();
    });

    win.Featurebase("onUnreadCountChange", (unreadCount: number) => {
      onUnreadCountChange?.(unreadCount);
    });

    setIsLoaded(true);
  }, [appId, theme, language, onShow, onHide, onUnreadCountChange]);

  const show = useCallback(
    (pageName: "home" | "messages" | "changelog" | "help" | undefined) => {
      const win = window as any;
      win.Featurebase?.("show", pageName);
    },
    []
  );

  const showNewMessage = useCallback((initialText: string | undefined) => {
    const win = window as any;
    win.Featurebase?.("showNewMessage", initialText);
  }, []);

  const showArticle = useCallback((articleId: string) => {
    const win = window as any;
    win.Featurebase?.("showArticle", articleId);
  }, []);

  const showChangelog = useCallback((entryId: string | undefined) => {
    const win = window as any;
    win.Featurebase?.("showChangelog", entryId);
  }, []);

  const showConversation = useCallback((conversationId: string) => {
    const win = window as any;
    win.Featurebase?.("showConversation", conversationId);
  }, []);

  const hide = useCallback(() => {
    const win = window as any;
    win.Featurebase?.("hide");
  }, []);

  const toggle = useCallback(() => {
    const win = window as any;
    win.Featurebase?.("toggle");
  }, []);

  const setTheme = useCallback((theme: "light" | "dark") => {
    const win = window as any;
    win.Featurebase?.("setTheme", theme);
  }, []);

  const setLanguage = useCallback((language: string) => {
    const win = window as any;
    win.Featurebase?.("setLanguage", language);
  }, []);

  return (
    <FeaturebaseContext.Provider
      value={{
        isLoaded,
        show,
        showNewMessage,
        showArticle,
        showChangelog,
        showConversation,
        hide,
        toggle,
        isVisible,
        setTheme,
        setLanguage,
      }}
    >
      <Script
        src="https://do.featurebase.app/js/sdk.js"
        id="featurebase-sdk"
        strategy="afterInteractive"
        onLoad={() => setIsLoaded(true)}
      />
      {children}
    </FeaturebaseContext.Provider>
  );
};

export const useFeaturebase = () => {
  const context = useContext(FeaturebaseContext);
  if (!context) {
    throw new Error("useFeaturebase must be used within a FeaturebaseProvider");
  }
  return context;
};