Change API of useWindowManager to take an object

Author: davidsteiner

README.md

@@ -4,9 +4,9 @@
 
 **A React hook for opening, managing and communicating with a child window in a type-safe manner.**
 
-![QA](https://img.shields.io/github/actions/workflow/status/davidsteiner/react-presentation-hook/ci.yml)
-![NPM](https://img.shields.io/npm/v/react-presentation-hook)
-![GitHub License](https://img.shields.io/github/license/davidsteiner/react-presentation-hook)
+[![QA](https://img.shields.io/github/actions/workflow/status/davidsteiner/react-presentation-hook/ci.yml)](https://github.com/davidsteiner/react-presentation-hook/actions)
+[![NPM](https://img.shields.io/npm/v/react-presentation-hook)](https://www.npmjs.com/package/react-presentation-hook)
+[![GitHub License](https://img.shields.io/github/license/davidsteiner/react-presentation-hook)](LICENSE)
 
 </div>
 
@@ -16,6 +16,14 @@ This library can be used for presentations, where the presented view needs to be
 
 While the primary use-case is presentations, this is a generic implementation which can be used for any scenario where a controlled additional window is needed with bi-directional communication with the parent window.
 
+## Installation
+
+Install `react-presentation-hook` using your favourite package manager.
+
+```shell
+npm i react-presentation-hook
+```
+
 ## How to use it?
 
 The library provides two convenient hooks for opening a child window, establishing
@@ -24,3 +32,32 @@ in either direction.
 
 These two hooks are `useWindowManager` and `useChildWindowManager` for the parent
 window and the child window respectively.
+
+### In the parent window
+
+Implement a message handler function, and pass it to the hook:
+
+```typescript
+function ParentComponent() {
+  const onMessage = useCallback(() => {
+    ...
+  }, [...]);
+
+  const { openChildWindow, closeChildWindow, isConnected, sendMessage } =
+    useWindowManager<PresentationState, ParentMessage, ChildMessage>({
+      onMessage,
+    });
+}
+```
+
+You can use `openChildWindow` and `closeChildWindow` to open and close the child window
+respectively.
+
+`isConnected` indicates whether the child window is open and a connection
+has been established. `sendMessage` can be used to send messages
+to the child window. It will be undefined if a connection has not been
+established.
+
+By default, the child window will be automatically closed when the
+parent window closes. To leave it open, pass `{ onMessage, closeWithParent: false }`
+to `useWindowManager`.

examples/vite-tanstack-app/src/routes/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useWindowManager } from "react-presentation-hook";
 
 import { MonitorUp, MonitorX } from "lucide-react";
@@ -23,65 +23,68 @@ function Index() {
     }
   );
 
-  const onMessage = ({ type }: ChildMessage) => {
-    switch (type) {
-      case "move-next": {
-        onNext();
-        break;
-      }
-      case "move-back": {
-        onBack();
-        break;
-      }
-    }
-  };
-
-  const { openChildWindow, closeChildWindow, isConnected, sendMessage } =
-    useWindowManager<PresentationState, ParentMessage, ChildMessage>(onMessage);
-
-  const onOpen = () => {
-    openChildWindow({
-      url: "/presented-view",
-      initialState: presentationState,
-    });
-  };
-
-  const onNext = () => {
+  const onBack = useCallback(() => {
     setPresentationState((previousState) => {
-      const newIndex = previousState.currentIndex + 1;
+      const newIndex = previousState.currentIndex - 1;
       if (newIndex < slides.length) {
-        const newState = {
+        return {
           currentIndex: newIndex,
           currentSlide: slides[newIndex],
           length: slides.length,
         };
-        if (sendMessage) {
-          sendMessage({ newState });
-        }
-        return newState;
       }
       return previousState;
     });
-  };
+  }, []);
 
-  const onBack = () => {
+  const onNext = useCallback(() => {
     setPresentationState((previousState) => {
-      const newIndex = previousState.currentIndex - 1;
+      const newIndex = previousState.currentIndex + 1;
       if (newIndex < slides.length) {
-        const newState = {
+        return {
           currentIndex: newIndex,
           currentSlide: slides[newIndex],
           length: slides.length,
         };
-        if (sendMessage) {
-          sendMessage({ newState });
-        }
-        return newState;
       }
       return previousState;
     });
+  }, []);
+
+  const onMessage = useCallback(
+    ({ type }: ChildMessage) => {
+      switch (type) {
+        case "move-next": {
+          onNext();
+          break;
+        }
+        case "move-back": {
+          onBack();
+          break;
+        }
+      }
+    },
+    [onBack, onNext]
+  );
+
+  const { openChildWindow, closeChildWindow, isConnected, sendMessage } =
+    useWindowManager<PresentationState, ParentMessage, ChildMessage>({
+      onMessage,
+    });
+
+  const onOpen = () => {
+    openChildWindow({
+      url: "/presented-view",
+      initialState: presentationState,
+    });
   };
 
+  useEffect(() => {
+    if (sendMessage) {
+      sendMessage({ newState: presentationState });
+    }
+  }, [presentationState, sendMessage]);
+
   return (
     <div className="p-4 my-8 flex flex-col bg-gradient-to-b from-gray-50 to-gray-100 rounded-lg">
       <div className="h-96 pb-8">

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-presentation-hook",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "type": "module",
   "repository": {
     "type": "git",

lib/src/use-window-manager.tsx

@@ -44,11 +44,17 @@ type ChildWindowState<TInitialState, TParentMessage> =
   | ReadyState<TInitialState, TParentMessage>
   | UnopenedState;
 
+export type WindowManagerOptions<TCustomInboundPayload> = {
+  onMessage: (message: TCustomInboundPayload) => void;
+  closeWithParent?: boolean;
+};
+
 export function useWindowManager<
   TInitialState,
   TCustomOutboundPayload,
   TCustomInboundPayload,
->(onMessage: (message: TCustomInboundPayload) => void, closeWithParent = true) {
+>(options: WindowManagerOptions<TCustomInboundPayload>) {
+  const { onMessage, closeWithParent = true } = options;
   const [childWindowState, setChildWindowState] = useState<
     ChildWindowState<TInitialState, TCustomOutboundPayload>
   >({ type: "unopened" });