🌑 Added useDarkMode hook. (#20)

README.md

@@ -48,6 +48,7 @@ yarn add use-custom-hooks
 
 - [useLocalStorage](#-useLocalStorage)
 - [useDebounce](#-useDebounce)
+- [useDarkMode](#-useDarkMode)
 - [useGeoLocation](#-useGeoLocation)
 
 ## 💾 useLocalStorage
@@ -108,6 +109,32 @@ const LocalValue = () =>{
 }
 ```
 
+## 🌑 useDarkMode
+Let's you toggle dark-mode by adding and removing a className from/to
+the body. The user-preference is stored in localStorage.
+
+### Usage
+
+```jsx
+import React from "react"
+import { useDarkMode } from "use-custom-hooks"
+
+const App = () =>{
+  const [isDarkMode,toggleDarkMode] = useDarkMode("dark")
+  /*
+    "dark" is the class name to be added to the body.
+  */ 
+
+  return(
+   <div>
+    <h1>Hello World</div>
+    <button onClick={toggleDarkMode}>Toggle Dark-Mode</button>
+    {/* The class '.dark' is added to body when dark-mode, and removed when light-mode. */}
+   </div>
+  );
+}
+```
+
 ## 🌎 useGeoLocation
 Get latitude and longitude positions from your browser
 

hooks/useDarkMode.js

@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react";
+
+/**
+ *
+ * Returns true if user prefers dark mode and false if not.
+ * @returns {boolean} Does user prefers dark mode.
+ */
+const _getUserPreferredMode = () => {
+  //If localStorage is available user preference is stored, return the stored value.
+  if (localStorage) {
+    const localPreference = localStorage.getItem("dark-mode");
+    if (localPreference) {
+      return JSON.parse(localStorage.getItem("dark-mode"));
+    }
+  }
+  //Else return the global dark-mode preference.
+  else {
+    return _getGlobalPreference();
+  }
+};
+
+/**
+ *
+ * Returns true if globally preferred theme is dark and false if not.
+ * @returns {boolean} Is dark mode globally preferred.
+ */
+const _getGlobalPreference = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+/**
+ *
+ * Custom hook which let's you toggle dark-mode by adding a class to the body.
+ * 
+ * @param {string} className Class name which is to be added to body when dark mode.
+ * @returns {Array} Array containing a boolean isDarkMode and a darkModeToggle function.
+ */
+const useDarkMode = (className) => {
+  const [isDarkMode, setIsDarkMode] = useState(_getUserPreferredMode());
+
+  useEffect(() => {
+    if (isDarkMode) {
+      document.body.classList.add(className);
+    } else {
+      document.body.classList.remove(className);
+    }
+  }, [isDarkMode]);
+
+  const toggleDarkMode = () => {
+    localStorage.setItem("dark-mode", !isDarkMode);
+    setIsDarkMode(!isDarkMode);
+  };
+
+  return [isDarkMode, toggleDarkMode];
+};
+
+export default useDarkMode;

index.js

@@ -1,3 +1,4 @@
+export { default as useDarkMode } from "./hooks/useDarkMode";
 export { default as useDebounce } from "./hooks/useDebounce";
 export { default as useGeoLocation } from "./hooks/useGeoLocation";
 export { default as useLocalStorage } from "./hooks/useLocalStorage";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-custom-hooks",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A collection of Custom Hooks for React.",
   "main": "index.js",
   "scripts": {},