Merge pull request #14 from PranuPranav97/fix/docs

Fix/docs

docs/Hooks/useScreenSize.md

@@ -0,0 +1,104 @@
+---
+custom_edit_url: https://github.com/PranuPranav97/zop-hooks-docs
+---
+
+## useScreenSize
+
+The `useScreenSize` hook is a custom React hook that allows you to get the current width and height of the screen dynamically. It automatically updates the screen size whenever the window is resized.
+
+### Usage
+
+```typescript
+import { useState, useEffect } from "react";
+
+function useScreenSize() {
+  const [screenSize, setScreenSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return screenSize;
+}
+
+export { useScreenSize };
+```
+
+To use the `useScreenSize` hook, follow these steps:
+
+Import the hook and any other necessary dependencies:
+
+```typescript
+import { useScreenSize } from "zop-hooks";
+```
+
+Invoke the `useScreenSize` hook within a functional component:
+
+```typescript
+function MyComponent() {
+  const screenSize = useScreenSize();
+
+  // Access the screen size values
+  const width = screenSize.width;
+  const height = screenSize.height;
+
+  // Rest of your component code
+  // ...
+}
+```
+
+### Return Value
+
+The `useScreenSize` hook returns an object containing the current screen size:
+
+- width (number): The current width of the screen in pixels.
+- height (number): The current height of the screen in pixels.
+
+### Example
+
+Here's an example of how you can use the useScreenSize hook in a functional component:
+
+```typescript
+import { useScreenSize } from "zop-hooks";
+
+function MyComponent() {
+  const screenSize = useScreenSize();
+
+  // Access the screen size values
+  const width = screenSize.width;
+  const height = screenSize.height;
+
+  return (
+    <div>
+      <p>Screen Width: {width}px</p>
+      <p>Screen Height: {height}px</p>
+    </div>
+  );
+}
+```
+
+In this example, the component displays the current screen width and height in pixels.
+
+### Notes
+
+- The `useScreenSize` hook uses the `useState` and `useEffect` hooks from React to manage state and perform side effects respectively.
+- The initial screen size is obtained when the hook is first invoked, but subsequent updates are triggered only when the window is resized. This optimization helps reduce unnecessary re-renders.
+- The event listener for window resize is added and removed in the useEffect hook's cleanup function to ensure proper handling of the event.
+
+Remember to include the necessary import statements and adjust the file paths accordingly when using the `useScreenSize` hook in your project.
+
+That's it! You can now utilize the `useScreenSize` hook to get the current screen size in your React components.

docs/Hooks/useScrollPosition.md

@@ -0,0 +1,73 @@
+---
+custom_edit_url: https://github.com/PranuPranav97/zop-hooks-docs
+---
+
+## useScrollPosition
+
+The `useScrollPosition` hook is a custom React hook that allows you to get the current scroll position of the window. It provides the x and y coordinates of the scroll position and updates them whenever the window is scrolled.
+
+### Usage
+
+Import the hook and any other necessary dependencies:
+
+```typescript
+import { useScrollPosition } from "zop-hooks";
+```
+
+Invoke the `useScrollPosition` hook within a functional component:
+
+```typescript
+function MyComponent() {
+  const scrollPosition = useScrollPosition();
+
+  // Access the scroll position values
+  const scrollX = scrollPosition.x;
+  const scrollY = scrollPosition.y;
+
+  // Rest of your component code
+  // ...
+}
+```
+
+### Return Value
+
+The `useScrollPosition` hook returns an object containing the current scroll position:
+
+-`x` (number): The current horizontal scroll position in pixels.
+
+-`y` (number): The current vertical scroll position in pixels.
+
+### Example
+
+Here's an example of how you can use the `useScrollPosition` hook in a functional component:
+
+```typescript
+import { useScrollPosition } from "zop-hooks";
+
+function MyComponent() {
+  const scrollPosition = useScrollPosition();
+
+  // Access the scroll position values
+  const scrollX = scrollPosition.x;
+  const scrollY = scrollPosition.y;
+
+  return (
+    <div>
+      <p>Scroll X: {scrollX}px</p>
+      <p>Scroll Y: {scrollY}px</p>
+    </div>
+  );
+}
+```
+
+In this example, the component displays the current horizontal and vertical scroll positions in pixels.
+
+### Notes
+
+- The `useScrollPosition` hook uses the `useState` and `useEffect` hooks from React to manage state and perform side effects respectively.
+- The initial scroll position is obtained when the hook is first invoked, but subsequent updates are triggered only when the window is scrolled. This optimization helps reduce unnecessary re-renders.
+- The event listener for window scroll is added and removed in the `useEffect` hook's cleanup function to ensure proper handling of the event.
+
+Remember to include the necessary import statements and adjust the file paths accordingly when using the `useScrollPosition` hook in your project.
+
+That's it! You can now utilize the `useScrollPosition` hook to get the current scroll position in your React components.

docs/Hooks/useWindowScroll.md

@@ -0,0 +1,89 @@
+---
+custom_edit_url: https://github.com/PranuPranav97/zop-hooks-docs
+---
+
+## useWindowScroll
+
+The `useWindowScroll` hook is a custom React hook that allows you to get the current vertical scroll position of the window. It provides the scroll position as a single value (`scrollY`) and updates it whenever the window is scrolled.
+
+### Usage
+
+```typescript
+import { useState, useEffect } from "react";
+
+function useWindowScroll() {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    function handleWindowScroll() {
+      setScrollY(window.scrollY);
+    }
+
+    window.addEventListener("scroll", handleWindowScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleWindowScroll);
+    };
+  }, []);
+
+  return scrollY;
+}
+
+export { useWindowScroll };
+```
+
+To use the `useWindowScroll` hook, follow these steps:
+
+Import the hook and any other necessary dependencies:
+
+```typescript
+import { useWindowScroll } from "zop-hooks";
+```
+
+Invoke the `useWindowScroll` hook within a functional component:
+
+```typescript
+function MyComponent() {
+  const scrollY = useWindowScroll();
+
+  // Access the scroll position value
+  // scrollY represents the vertical scroll position
+
+  // Rest of your component code
+  // ...
+}
+```
+
+### Return Value
+
+The `useWindowScroll` hook returns the current vertical scroll position (`scrollY`) as a number.
+
+### Example
+
+Here's an example of how you can use the `useWindowScroll` hook in a functional component:
+
+```typescript
+import { useWindowScroll } from "./path/to/useWindowScroll";
+
+function MyComponent() {
+  const scrollY = useWindowScroll();
+
+  return (
+    <div>
+      <p>Scroll Y: {scrollY}px</p>
+    </div>
+  );
+}
+```
+
+In this example, the component displays the current vertical scroll position of the window in pixels.
+
+### Notes
+
+- The `useWindowScroll` hook uses the `useState` and `useEffect` hooks from React to manage state and perform side effects, respectively.
+- The initial scroll position is obtained when the hook is first invoked, but subsequent updates are triggered only when the window is scrolled. This optimization helps reduce unnecessary re-renders.
+- The event listener for window scroll is added and removed in the `useEffect` hook's cleanup function to ensure proper handling of the event.
+
+Remember to include the necessary import statements and adjust the file paths accordingly when using the `useWindowScroll` hook in your project.
+
+That's it! You can now utilize the `useWindowScroll` hook to get the current vertical scroll position of the window in your React components.