diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx
index 7cf3f6d..a998d37 100644
--- a/demo/DemoApp.tsx
+++ b/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 {Subapp, useSubapps} from "../src/Components/Subapps/Subapps";
+import {useCallableCurtain, useCurtains} from "../src/Components/Curtains/Curtains";
+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();
+
+ // Easy subapp.
+ const easySubapp = useCallableSubapp();
+
const [datetime, setDatetime] = useState(null);
const [selected, setSelected] = useState(null);
@@ -446,10 +453,10 @@ export function DemoApp()
+
+ Easy with callable curtain
Subapps
@@ -473,6 +480,10 @@ export function DemoApp()
{ subapps.open() }}>
Complex subapp with component
+
+
+ Easy with callable subapp
+
Modals
diff --git a/demo/DemoCurtain.tsx b/demo/DemoCurtain.tsx
new file mode 100644
index 0000000..0ba33f0
--- /dev/null
+++ b/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 (
+ Close the curtain
+ );
+}
diff --git a/src/Components/Curtains/Curtains.tsx b/src/Components/Curtains/Curtains.tsx
index d5aba3a..12d6076 100644
--- a/src/Components/Curtains/Curtains.tsx
+++ b/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]);
+}
+
/**
diff --git a/src/Components/Subapps/Subapps.tsx b/src/Components/Subapps/Subapps.tsx
index 4e9d67c..7713f51 100644
--- a/src/Components/Subapps/Subapps.tsx
+++ b/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.
*/