Merge pull request #20 from zJaaal/dev

Dev

Author: zJaaal

README.md

@@ -1,6 +1,6 @@
 # React Scroll Utilities (Beta)
 
-React Scroll Utilities is a Lightweight library to track scroll events like, proximity to components, direction of scroll and render a component if it's on screen sight. I'll be adding more features and improving the functionality. I'm also open to read any request or change that you think that would be a good addition. This library only supports vertical scroll at the moment.
+React Scroll Utilities is a Lightweight library to track scroll events like, proximity to components, direction of scroll and render a component if it's on screen sight. I'll be adding more features and improving the functionality. I'm also open to read any request or change that you think that would be a good addition.
 
 ## ScrollWatcher Component
 
@@ -26,7 +26,7 @@ You only need to render this component on the top level of your app, it provides
 
 ## useProximity hook
 
-This hook lets you know how far is the screen from the component, it returns negative and positive values, where 0 is the top limit of the screen (when you scroll down your component ( out of sight ), proximity will be on negatives values) and 2 is the bottom limit of the screen (when you scroll up your component ( out of sight ), proximity will be more than 2), so your component is on screen if the proximity value is between 0 and 2, were 1 is approximately the center of the screen.
+This hook lets you know how far is the screen from the component, it returns an object with two properties: x and y. Which values represents the proximity the component has to the center of the current viewport as a float value. For Y the acceptable value where the component is on sigth is between 0 and 2. For X the acceptable value where the component is on sigth is between 0 and 3.
 
 ### Usage
 
@@ -37,26 +37,38 @@ This hook only take one argument that should be a ref to an HTML Element. This h
 ```js
 //TypeScript
 function Example() {
-  const ref = useRef < HTMLDivElement > null;
+  const ref = useRef <HTMLDivElement>(null);
 
-  const proximity = useProximity(ref);
+  //I'm destructuring the object but you can easily use it without destructuring
+  const { x, y } = useProximity(ref);
 
-  return <div ref={ref}>{"proximity: " + proximity}</div>;
+  return (
+    <div ref={ref}>
+      <div>{"X proximity: " + x}</div>
+      <div>{"Y proximity: " + y}</div>
+    </div>
+  );
 }
 
 //JavaScript
 function Example() {
   const ref = useRef(null);
 
-  const proximity = useProximity(ref);
+  //I'm destructuring the object but you can easily use it without destructuring
+  const { x, y } = useProximity(ref);
 
-  return <div ref={ref}>{"proximity: " + proximity}</div>;
+  return (
+    <div ref={ref}>
+      <div>{"X proximity: " + x}</div>
+      <div>{"Y proximity: " + y}</div>
+    </div>
+  );
 }
 ```
 
 ## Render Component
 
-This component implements the useProximity hook, and will only render your component if proximity is on an acceptable value (between 0 and 2). So you can use it to add animations to your components on render, like an entry transition.
+This component implements the useProximity hook, and will only render your component if proximity is on an acceptable value (between 0 and 2 for Y and between 0 and 3 for X). So you can use it to add animations to your components on render, like an entry transition.
 
 ### Usage
 
@@ -82,7 +94,7 @@ This component needs a React Children to work, it also accepts custom styles, th
 
 ## useDirection hook
 
-This hooks returns the current direction of the scroll. It returns an string that can be "UP" or "DOWN", its default value is "DOWN".
+This hooks returns the current direction of the scroll. It returns an string that can be "UP", "DOWN", "RIGHT" or "LEFT", its default value is "DOWN".
 
 ### Usage
 
@@ -104,6 +116,14 @@ function Example() {
         //Do something else
         break;
       }
+      case "RIGHT": {
+        // Do something
+        break;
+      }
+      case "LEFT": {
+        //Do something else
+        break;
+      }
     }
   }, [direction]);
 
@@ -119,4 +139,4 @@ function Example() {
 
 ## Directions enum
 
-This lib provides an enum for TypeScript users, it just has two properties at the moment: Directions.up and Directions.down, that returns the value of "UP" and "DOWN", you can use it as helper for useDirection hook.
+This lib provides an enum for TypeScript users, it just has two properties at the moment: Directions.up, Directions.down, Directions.right and Directions.left that returns the value of "UP", "DOWN" "RIGHT" and "LEFT", you can use it as helper for useDirection hook.

index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>

package-lock.json

@@ -1,7 +1,8 @@
 {
   "name": "react-scroll-utilities",
   "private": false,
-  "version": "0.2.8",
+  "version": "0.3.0",
+  "license": "MIT",
   "type": "module",
   "main": "src/lib/index.ts",
   "homepage": "https://github.com/zJaaal/react-scroll-utilities#readme",

package.json

@@ -1,14 +1,14 @@
-import { useLayoutEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import useProximity from "./lib/hooks/useProximity";
 
 function App() {
   const ref = useRef<HTMLDivElement>(null);
 
   const proximity = useProximity(ref);
-
   return (
     <div className="test" ref={ref}>
-      {"proximity: " + proximity}
+      {"proximity Y: " + proximity.y}
+      {"proximity X: " + proximity.x}
     </div>
   );
 }

public/vite.svg

@@ -11,7 +11,7 @@ describe("Render Component", () => {
     HTMLElement.prototype.getBoundingClientRect = getBoundingClientRectMock;
   });
 
-  it("should render on a proximity between 0 and 2", () => {
+  it("should render on a proximity between 0 and 2 for Y", () => {
     const RenderTestComponent = render(
       <ScrollWatcher>
         <Render>Hi i'm being rendered</Render>
@@ -20,12 +20,17 @@ describe("Render Component", () => {
     fireEvent.scroll(window, {
       target: { scrollY: window.innerHeight / 2 },
     });
+
+    fireEvent.scroll(window, {
+      target: { scrollX: window.innerWidth / 2 },
+    });
+
     expect(
       RenderTestComponent.getByText("Hi i'm being rendered"),
-      "Component should render when the proximity is between 0 and 2"
+      "Component should render when the proximity is between 0 and 2 for Y and between 0 and 3 for X"
     ).toBeTruthy();
   }),
-    it("should not render out of a proximity between 0 and 2", () => {
+    it("should not render out of a proximity between 0 and 2 for Y and out of between 0 and 3 for X", () => {
       const RenderTestComponent = render(
         <ScrollWatcher>
           <Render>Hi i'm not being rendered</Render>
@@ -36,9 +41,13 @@ describe("Render Component", () => {
         target: { scrollY: window.innerHeight * 2 },
       });
 
+      fireEvent.scroll(window, {
+        target: { scrollX: window.innerWidth * 2 },
+      });
+
       expect(
         RenderTestComponent.queryByText("Hi i'm not being rendered"),
-        "Component should be out of bounds of proximity acceptance"
+        "Component should be out of bounds of proximity acceptance for Y and and out of between 0 and 3 for X"
       ).toBeFalsy();
     });
 });

src/App.tsx

@@ -0,0 +1,16 @@
+import { useRef } from "react";
+import useProximity from "../../lib/hooks/useProximity";
+
+const UseProximityX = () => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { x } = useProximity(ref);
+
+  return (
+    <div ref={ref} role="log">
+      {x}
+    </div>
+  );
+};
+
+export default UseProximityX;

src/__test__/Render.test.tsx

@@ -0,0 +1,16 @@
+import { useRef } from "react";
+import useProximity from "../../lib/hooks/useProximity";
+
+const UseProximityY = () => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { y } = useProximity(ref);
+
+  return (
+    <div ref={ref} role="log">
+      {y}
+    </div>
+  );
+};
+
+export default UseProximityY;