From e9e8584d8202b785533de60d23e79d72541bd24f Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sat, 2 Oct 2021 14:24:36 +0300
Subject: [PATCH] added 2 custom hooks

---
 client/src/hooks/useLocalStorage.js | 20 ++++++++++++++++++++
 client/src/hooks/useMediaQuery.js   | 24 ++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 client/src/hooks/useLocalStorage.js
 create mode 100644 client/src/hooks/useMediaQuery.js

diff --git a/client/src/hooks/useLocalStorage.js b/client/src/hooks/useLocalStorage.js
new file mode 100644
index 0000000..8b1e84e
--- /dev/null
+++ b/client/src/hooks/useLocalStorage.js
@@ -0,0 +1,20 @@
+import {useState, useEffect} from 'react'
+
+/* How to use this hook:
+import useLocalStorage from './hooks/useLocalStorage';
+
+function App() {
+  const [example, setExample] = useLocalStorage('example_key', {example: 'anything as default'});
+
+  return ();
+}; */
+
+export default function useLocalStorage(key = '', defaultValue = null) {
+  const [value, setValue] = useState(JSON.parse(localStorage.getItem(key)) || defaultValue)
+
+  useEffect(() => {
+    if (value != null) localStorage.setItem(key, JSON.stringify(value))
+  }, [key, value])
+
+  return [value, setValue]
+}
diff --git a/client/src/hooks/useMediaQuery.js b/client/src/hooks/useMediaQuery.js
new file mode 100644
index 0000000..2d2879f
--- /dev/null
+++ b/client/src/hooks/useMediaQuery.js
@@ -0,0 +1,24 @@
+import {useState, useEffect} from 'react'
+
+/* How to use this hook:
+import useMediaQuery from './hooks/useMediaQuery';
+
+function App() {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  return ();
+}; */
+
+export default function useMediaQuery(query = '(max-width: 768px)') {
+  const [matches, setMatches] = useState(window.matchMedia(query).matches)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    const listener = () => setMatches(media.matches)
+
+    media.addListener(listener)
+    return () => media.removeListener(listener)
+  }, [query])
+
+  return matches
+}