feat: add NDKHeadless component for easier NDK instantiation in React apps

Author: pablof7z

ndk-hooks/src/index.ts

@@ -20,6 +20,8 @@ export * from "./session/hooks/use-available-sessions";
 export * from "./subscribe/store";
 export * from "./wallet/hooks";
 
+export * from "./ndk/headless/index.js";
+
 export * from "@nostr-dev-kit/ndk";
 import NDK from "@nostr-dev-kit/ndk";
 export default NDK;

ndk-hooks/src/ndk/headless/index.tsx

@@ -0,0 +1,49 @@
+import NDK, { NDKConstructorParams } from "@nostr-dev-kit/ndk";
+import { NDKSessionStorageAdapter } from "../../session/storage";
+import { useNDKInit } from "../hooks";
+import { useEffect } from "react";
+import { useNDKSessionMonitor } from "../../session/hooks/use-ndk-session-monitor";
+import { SessionStartOptions } from "../../session/store/types";
+
+interface NDKHeadlessProps {
+    ndk: NDKConstructorParams;
+    session: {
+        storage: NDKSessionStorageAdapter;
+        opts: SessionStartOptions;
+    } | false;
+};
+
+/**
+ * Add a headless component to make it simpler to instantiate NDK in React apps.
+ * 
+ * @example
+ * ```tsx
+ * import { NDKHeadless } from "@nostr-dev-kit/ndk-hooks";
+ * 
+ * function App() {
+ *   return (
+ *     <>
+ *     <NDKHeadless
+ *       ndk={{ explicitRelayUrls: ["wss://relay.damus.io"] }}
+ *      session={{ storage: new NDKSessionLocalStorage(), opts: { follows: true, profile: true } }}
+ *     />
+ *     <YourApp />
+ *    </>
+ *  );
+ * }
+ */
+export function NDKHeadless({
+    ndk,
+    session = false,
+}: NDKHeadlessProps) {
+    const initNDK = useNDKInit();
+
+    useEffect(() => {
+        const _ndk = new NDK(ndk);
+        initNDK(_ndk);
+    }, []);
+
+    useNDKSessionMonitor(session ? session.storage : false, session ? session.opts : undefined);
+    
+    return null;
+}