Add helper hook to ease curtains / subapps creation.

demo/DemoApp.tsx

@@ -25,15 +25,22 @@ import {Outlet} from "react-router-dom";
 import {ToggleSwitch} from "../src/Components/Forms/ToggleSwitch";
 import {Step, Steps} from "../src/Components/Steps/Steps";
 import {AsyncPaginate, AutoPaginate, Paginate} from "../src/Components/Pagination/Paginate";
-import {useCurtains} from "../src/Components/Curtains/Curtains";
+import {useCallableCurtain, useCurtains} from "../src/Components/Curtains/Curtains";
-import {Subapp, useSubapps} from "../src/Components/Subapps/Subapps";
+import {Subapp, useCallableSubapp, useSubapps} from "../src/Components/Subapps/Subapps";
 import {DemoSubapp} from "./DemoSubapp";
+import {DemoCurtain} from "./DemoCurtain";
 
 export function DemoApp()
 {
 	const curtains = useCurtains();
 	const subapps = useSubapps();
 
+	// Easy curtain.
+	const easyCurtain = useCallableCurtain(<DemoCurtain />);
+
+	// Easy subapp.
+	const easySubapp = useCallableSubapp(<DemoSubapp />);
+
 	const [datetime, setDatetime] = useState(null);
 
 	const [selected, setSelected] = useState(null);
@@ -446,10 +453,10 @@ export function DemoApp()
 
 			<Card>
 				<button onClick={() => {
-					const curtainId = curtains.open(
+					curtains.open(<DemoCurtain />);
-						<button className={"close"} onClick={() => { curtains.close(curtainId); }}><X /> Close the curtain</button>
-					);
 				}}>Open a curtain</button>
+
+				<button onClick={easyCurtain}>Easy with callable curtain</button>
 			</Card>
 
 			<h3>Subapps</h3>
@@ -473,6 +480,10 @@ export function DemoApp()
 				<button onClick={() => { subapps.open(<DemoSubapp />) }}>
 					Complex subapp with component
 				</button>
+
+				<button onClick={easySubapp}>
+					Easy with callable subapp
+				</button>
 			</Card>
 
 			<h3>Modals</h3>

demo/DemoCurtain.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import {useCurtain} from "../src/Components/Curtains/Curtains";
+import {X} from "@phosphor-icons/react";
+
+/**
+ * Demo curtain component.
+ */
+export function DemoCurtain()
+{
+	const {close} = useCurtain();
+
+	return (
+		<button className={"close"} onClick={close}><X/> Close the curtain</button>
+	);
+}

src/Components/Curtains/Curtains.tsx

@@ -50,6 +50,28 @@ export function useCurtains(): CurtainsContextState
 	return useContext(CurtainsContext);
 }
 
+/**
+ * Curtain callable.
+ * @param curtains The curtains context state.
+ * @param curtainElement The curtain element to open when called.
+ */
+export function callableCurtain(curtains: CurtainsContextState, curtainElement: React.ReactNode): () => CurtainUuidType
+{
+	return () => curtains.open(curtainElement);
+}
+
+/**
+ * Hook to create a simple curtain.
+ * @param curtainElement Content of the curtain to open.
+ */
+export function useCallableCurtain(curtainElement: React.ReactNode): () => CurtainUuidType
+{
+	// Get curtains context state.
+	const curtains = useCurtains();
+	// Create and keep the curtain callable in memory.
+	return useCallback(callableCurtain(curtains, curtainElement), [curtains, curtainElement]);
+}
+
 
 
 /**

src/Components/Subapps/Subapps.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {X} from "@phosphor-icons/react";
-import {useCurtain, useCurtains} from "../Curtains/Curtains";
+import {useCurtain, useCallableCurtain, useCurtains} from "../Curtains/Curtains";
 
 /**
  * More natural name of useCurtains for subapps.
@@ -14,6 +14,12 @@ export const useSubapps = useCurtains;
  */
 export const useSubapp = useCurtain;
 
+/**
+ * More natural name of useCallableCurtain for subapps.
+ * @see useCallableCurtain
+ */
+export const useCallableSubapp = useCallableCurtain;
+
 /**
  * Subapp main component.
  */