From 0a660e1d00ce1e64e6487876c895c7ff02a59645 Mon Sep 17 00:00:00 2001
From: Safnaj <safnaj99@gmail.com>
Date: Tue, 7 May 2024 00:55:30 +0530
Subject: [PATCH 1/2] Renamed useLongPress Hook Folder
---
src/{30-useLongPress.js => 30-useLongPress}/LongPressComponent.js | 0
src/{30-useLongPress.js => 30-useLongPress}/useLongPress.js | 0
2 files changed, 0 insertions(+), 0 deletions(-)
rename src/{30-useLongPress.js => 30-useLongPress}/LongPressComponent.js (100%)
rename src/{30-useLongPress.js => 30-useLongPress}/useLongPress.js (100%)
diff --git a/src/30-useLongPress.js/LongPressComponent.js b/src/30-useLongPress/LongPressComponent.js
similarity index 100%
rename from src/30-useLongPress.js/LongPressComponent.js
rename to src/30-useLongPress/LongPressComponent.js
diff --git a/src/30-useLongPress.js/useLongPress.js b/src/30-useLongPress/useLongPress.js
similarity index 100%
rename from src/30-useLongPress.js/useLongPress.js
rename to src/30-useLongPress/useLongPress.js
From 86c100c8996d89e3cf7de5cf8f78fe38f4f38224 Mon Sep 17 00:00:00 2001
From: Safnaj <safnaj99@gmail.com>
Date: Tue, 7 May 2024 00:55:40 +0530
Subject: [PATCH 2/2] useBreakpoints Hook
---
.../BreakpointsComponents.js | 12 ++++++
src/31-useBreakpoints/useBreakpoints.js | 37 +++++++++++++++++++
2 files changed, 49 insertions(+)
create mode 100644 src/31-useBreakpoints/BreakpointsComponents.js
create mode 100644 src/31-useBreakpoints/useBreakpoints.js
diff --git a/src/31-useBreakpoints/BreakpointsComponents.js b/src/31-useBreakpoints/BreakpointsComponents.js
new file mode 100644
index 0000000..ac7392c
--- /dev/null
+++ b/src/31-useBreakpoints/BreakpointsComponents.js
@@ -0,0 +1,12 @@
+import useBreakpoints from "./useBreakpoints";
+
+export default function BreakpointsComponent() {
+ const { isMobile, isTablet } = useBreakpoints();
+
+ return (
+ <>
+ {isMobile && <div>Mobile</div>}
+ {isTablet && <div>Tablet</div>}
+ </>
+ );
+}
diff --git a/src/31-useBreakpoints/useBreakpoints.js b/src/31-useBreakpoints/useBreakpoints.js
new file mode 100644
index 0000000..496bc21
--- /dev/null
+++ b/src/31-useBreakpoints/useBreakpoints.js
@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+
+const useBreakpoints = () => {
+ const [currentBreakpoint, setCurrentBreakpoint] = useState("");
+
+ useEffect(() => {
+ const handleResize = () => {
+ const mobileMatch = window.matchMedia("(min-width: 320px)");
+ const tabletMatch = window.matchMedia("(min-width: 768px)");
+ const desktopMatch = window.matchMedia("(min-width: 1024px)");
+
+ if (desktopMatch.matches) {
+ setCurrentBreakpoint("desktop");
+ } else if (tabletMatch.matches) {
+ setCurrentBreakpoint("tablet");
+ } else if (mobileMatch.matches) {
+ setCurrentBreakpoint("mobile");
+ }
+ };
+
+ handleResize(); // Initial check
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
+
+ const isMobile = currentBreakpoint === "mobile";
+ const isTablet = currentBreakpoint === "tablet";
+ const isDesktop = currentBreakpoint === "desktop";
+
+ return {
+ isMobile,
+ isTablet,
+ isDesktop,
+ };
+};
+
+export default useBreakpoints;