Add custom hook -> use-preview

README.md

@@ -53,6 +53,7 @@ yarn add use-custom-hooks
 - [useGeoLocation](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usegeolocation)
 - [useLocalStorage](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-uselocalstorage)
 - [useMousePosition](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usemouseposition)
+- [useViewport](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usepreview)
 
 ## 📄 Documentation
 For documentaion, examples and other details refer [Documentation](https://github.com/aromalanil/useCustomHooks/tree/master/docs)

docs/README.md

@@ -11,6 +11,7 @@
 - [useMousePosition](#-usemouseposition)
 - [useGeoLocation](#-usegeolocation)
 - [usePrevious](#-useprevious)
+- [useViewport](#-useviewport)
 
 </br>
 
@@ -372,6 +373,49 @@ function App() {
 
 </br>
 
+<br>
+
+## 🖥 useViewport
+
+Returns an object with the current width of the viewport and the type of device.
+
+### Usage
+
+```jsx
+import React from "react";
+import MobileComponent from ".Example/MobileComponent";
+import TabletComponent from ".Example/TabletComponent";
+import DesktopComponent from ".Example/DesktopComponent";
+import { useViewport, MOBILE, TABLET } from "use-custom-hooks";
+
+const Screen = () => {
+  const { viewport } = useViewport();
+  /*
+    Using Object destructuring we can get width and device
+    from viewport object.
+  */
+
+  if (viewport.device === MOBILE) {
+    return <MobileComponent />;
+  } else if (viewport.device === TABLET) {
+    return <TabletComponent />;
+  } else {
+    return <DesktopComponent />;
+  }
+};
+```
+### Parameters
+
+None : This hooks takes no parameters.
+
+### Return value
+
+`{width,device}`
+
+1. `width` (_number_) : Current width of the viewport.
+2. `device` (_string_) : Device type.
+
+<br>
 
 # Contribution Guidelines
 

hooks/useViewport.js

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Helper constants that determines the current screen size.
+ * @constant
+ * @type {string}
+ */
+export const MOBILE = 'MOBILE';
+export const TABLET = 'TABLET';
+export const DESKTOP = 'DESKTOP';
+
+/**
+ * A function which gets the width of the screen.
+ * Returns one of three possible values depending of the screen's current width.
+ *
+ * @param {number} width
+ * @returns {*} The constant corresponding the screen size.
+ */
+const getDevice = (width) => {
+  if (width < 768) return MOBILE;
+  if (width < 992) return TABLET;
+  return DESKTOP;
+};
+
+/**
+ * Custom useState hook which listens to resize events and
+ * manage the viewport of the user's device.
+ *
+ * @returns {Object} viewport An object with the width of the user's viewport and the device type.
+ */
+function useViewport() {
+  const [viewport, setViewport] = useState({
+    width: window.innerWidth,
+    device: getDevice(window.innerWidth),
+  });
+
+  useEffect(() => {
+    // Event listener to track the window resize.
+    const handleResize = () => {
+      setViewport({
+        width: window.innerWidth,
+        device: getDevice(window.innerWidth),
+      });
+    };
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return { viewport };
+}
+
+export default useViewport;

package.json

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