react hooks

README.md

@@ -13,7 +13,7 @@ yarn add @flare/react-hooks --registry https://toodle.ddns.net/public-node-regis
 ## Usage
 
 ```jsx
-import { StandardCV } from "@flare/react-hooks";
+import { useWindowSize, useLink, useTitle } from "@flare/react-hooks";
 ```
 
 **1.0.0**

src/hooks/useLink.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+const useLink = (href, rel) => {
+  useEffect(() => {
+    const link = document.createElement("link");
+    link.href = href;
+    link.rel = rel;
+
+    document.head.appendChild(link);
+
+    return () => {
+      document.head.removeChild(link);
+    };
+  }, [href, rel]);
+};
+
+export default useLink;

src/hooks/useTitle.js

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+
+const useTitle = title => {
+  useEffect(() => {
+    const prevTitle = document.title;
+    document.title = title;
+    return () => {
+      document.title = prevTitle;
+    };
+  }, [title]);
+};
+
+export default useTitle;

src/hooks/useWindowSize.js

@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+
+const screenSizeLimit = {
+  mobile: 768,
+  tablet: 992
+};
+
+const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined
+  });
+
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  const isMobile = windowSize.width < screenSizeLimit.mobile;
+  const isTablet =
+    windowSize.width >= screenSizeLimit.mobile &&
+    windowSize.width < screenSizeLimit.tablet;
+  const isDesktop = windowSize.width >= screenSizeLimit.tablet;
+
+  return {
+    windowSize,
+    isMobile,
+    isTablet,
+    isDesktop
+  };
+};
+
+export default useWindowSize;
+
+/* Test it:
+<div>
+    {windowSize.width}px / {windowSize.height}px
+</div>
+*/

src/index.js

@@ -1,2 +1,5 @@
-const empty = "";
-export { empty };
+import useWindowSize from "./hooks/useWindowSize";
+import useLink from "./hooks/useLink";
+import useTitle from "./hooks/useTitle";
+
+export { useWindowSize, useLink, useTitle };