srph · January 9, 2025 06:12 · Jan 9, 2025 · Jan 9, 2025 · Dec 30, 2024 · Dec 30, 2024
diff --git a/useEphemeralState.ts b/useEphemeralState.ts
@@ -10,7 +10,7 @@ const useEphemeralState = (value: boolean, delay: number) => {
 
   useEffect(() => {
     if (!value) {
-      return;
+      return setState(value);
     }
 
     setState(value);

diff --git a/readme.md b/readme.md
@@ -2,7 +2,8 @@
 Here's an example of using this hook on top of react-query.
 
 When your react-query mutation succeeds, we'll only flash the success state for 3 seconds until it's reverted back to normal
-```
+
+```tsx
 const isSuccess = useEphemeralState(
   mutation.isSuccess,
   3000,

diff --git a/readme.md b/readme.md
@@ -0,0 +1,15 @@
+## Usage
+Here's an example of using this hook on top of react-query.
+
+When your react-query mutation succeeds, we'll only flash the success state for 3 seconds until it's reverted back to normal
+```
+const isSuccess = useEphemeralState(
+  mutation.isSuccess,
+  3000,
+);
+
+const isError = useEphemeralState(
+  mutation.isError,
+  5000,
+);
+```
diff --git a/useEphemeralState.ts b/useEphemeralState.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+// This allows us to control how long we can keep a state true. After the delay,
+// the state will be reverted to false.
+//
+// For instance, we only want to flash the success state for a few seconds to the user
+// as feedback for the form. After that, we'll show the form again as normal.
+const useEphemeralState = (value: boolean, delay: number) => {
+  const [state, setState] = useState(false);
+
+  useEffect(() => {
+    if (!value) {
+      return;
+    }
+
+    setState(value);
+
+    const timeout = setTimeout(() => {
+      setState(false);
+    }, delay);
+
+    return () => clearTimeout(timeout);
+  }, [value]);
+
+  return state;
+};
+
+export { useEphemeralState };
No results found