Merge pull request #42 from zJaaal/dev

Dev

Author: zJaaal

README.md

@@ -17,8 +17,10 @@ React Scroll Utilities is a Lightweight library to track scroll events like, pro
 5. [useLinearValue Hook](#uselinearvalue-hook)
 6. [useDirection Hook](#usedirection-hook)
 7. [Linear Values Options](#linear-values-options)
-8. [Circle Component](#circle-component)
-9. [Rectangle Component](#rectangle-component)
+8. [Options Recommendations](#options-recommendations)
+9. [Circle Component](#circle-component)
+10. [Rectangle Component](#rectangle-component)
+11. [Circle/Rectangle Recommendations](#circlerectangle-recommendations)
 
 
 ## Installation
@@ -212,11 +214,6 @@ const SpinningSquare = () => {
     startValue: 0,
     endValue: 360,
     elementRef: ref,
-    options: {
-      //In this case lets say that we are going to use the SpinningSquare in a footer, so we use anchor: "bottom"
-      //Anyways, I recommend to test each of the possible anchor values to see how it behaves.
-      anchor: "bottom",
-    },
   };
 
   //Just an example of using an external object
@@ -329,7 +326,7 @@ So, let's say we are using a component of 1000px, middle as anchor and we set du
 
 The animation won't start until the center of the screen (middle anchor) is at the center of the component (500px). So the total distance from delay to the end of the component is 500px. We also setted a duration at half, so the animation should last as half of the total distance, at 250px of the end of the component the animation will finish.
 
-### Recommendations
+### Options Recommendations
 
 If you struggle trying to understand that. I mean it could be hard to understand with all those numbers and calculations.
 
@@ -354,7 +351,7 @@ I recommend to experiment with those values. Just go and mess around with it, ma
     options, // You can pass it like this because it has the same name as the property
   });
 
-  //It's call height because I'm using this hook to change the height of a component on scroll
+  //It's called height because I'm using this hook to change the height of a component on scroll
   //In this case, the height will vary from 10 to 100 
   const height = useLinearValue({
     startValue: 10,
@@ -438,7 +435,7 @@ This will render a rectangle that has a height of 400px, a width of 100px and a
 ```
 
 
-## Recomendations
+## Circle/Rectangle Recommendations
 
 To make responsive the components, I recommend to use rem or em values, so that way you can modify the font-size of the root or parent component using media queries and therefore modify the sizes of the components.
 

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "react-scroll-utilities",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.2",
   "license": "MIT",
   "type": "module",
   "main": "src/lib/index.ts",
-  "homepage": "https://github.com/zJaaal/react-scroll-utilities#readme",
+  "homepage": "https://react-scroll-utilities.netlify.app",
   "keywords": [
     "scroll",
     "react-components",

package.json

@@ -6,6 +6,7 @@ import LinearValue from "./site/components/linearValue/LinearValue";
 import Proximity from "./site/components/proximity/Proximity";
 
 function App() {
+  console.log("Welcome to React Scroll Utilities v1.1.2");
   return (
     <div style={{ height: "100%" }}>
       <Header />

src/App.tsx

@@ -1,15 +1,16 @@
 import getLinearValueFromOptions from "../../lib/utils/calculations/linear/getLinearValueFromOptions";
 import { describe, it, expect } from "vitest";
 import getValueFromPercentage from "../../lib/utils/calculations/misc/getValueFromPercentage";
+import { LinearValueOptions } from "../../lib/types";
 const start = 0;
 const end = 500;
 const delay = 50;
 const duration = 50;
 const height = 1000;
-const defaultOptions = {
+const defaultOptions: LinearValueOptions = {
   delay: 0,
   duration: 100,
-  anchor: "middle" as "middle",
+  anchor: "middle",
 };
 
 describe("getLinearValueFromOptions function", () => {

src/__test__/functions/getLinearValueFromOptions.test.ts

@@ -1,10 +1,4 @@
-import React, {
-  CSSProperties,
-  FC,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from "react";
+import React, { CSSProperties, FC, useEffect, useRef } from "react";
 import { useLinearValue } from "../../index";
 import { validateRectangleProps } from "../../utils/validations/components/validateRectangleProps";
 import { RectangleProps } from "./types";

src/lib/components/rectangle/Rectangle.tsx

@@ -1,7 +1,6 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef } from "react";
 import ScrollContext from "../context/ScrollContext";
 import { Coors, Directions } from "../types";
-import fixScroll from "../utils/calculations/proximity/fixScroll";
 import validateScrollValue from "../utils/validations/hooks/validateScrollValue";
 
 /**

src/lib/hooks/useDirection.ts

@@ -1,17 +1,9 @@
 import { useRef, useLayoutEffect } from "react";
-import { DynamicColor, Directions, LinearValueOptions } from "../types";
-import clamp from "../utils/calculations/misc/clamp";
+import { DynamicColor, defaultOptions } from "../types";
 import getCurrentColor from "../utils/calculations/color/getCurrentColor";
 import validateColors from "../utils/validations/hooks/validateColors";
-import useDirection from "./useDirection";
 import useProximity from "./useProximity";
 
-const defautlOptions: LinearValueOptions = {
-  anchor: "middle",
-  delay: 0,
-  duration: 100,
-};
-
 /**
  * @description This custom hook takes an object with four properties: startColor, endColor, elementRef and options.
  *
@@ -29,7 +21,7 @@ const useDynamicColor = ({
   elementRef,
   options,
 }: DynamicColor) => {
-  const mixedOptions = { ...defautlOptions, ...options };
+  const mixedOptions = { ...defaultOptions, ...options };
   const color = useRef<number[]>([...startColor]);
   const height = useRef<number>();
 

src/lib/hooks/useDynamicColor.ts

@@ -1,19 +1,10 @@
 import React, { useLayoutEffect, useRef } from "react";
-import { LinearValueOptions, LinearValueProps } from "../types";
-import clamp from "../utils/calculations/misc/clamp";
-import getLinearValue from "../utils/calculations/linear/getLinearValue";
-import { LinearValue, OptionsParams } from "../utils/calculations/types";
+import { LinearValueProps, defaultOptions } from "../types";
+import { OptionsParams } from "../utils/calculations/types";
 import validateLinearValues from "../utils/validations/hooks/validateLinearValues";
 import useProximity from "./useProximity";
-import getValueFromPercentage from "../utils/calculations/misc/getValueFromPercentage";
 import getLinearValueFromOptions from "../utils/calculations/linear/getLinearValueFromOptions";
 
-const defaultOptions: LinearValueOptions = {
-  anchor: "middle",
-  duration: 100,
-  delay: 0,
-};
-
 /**
  * @description This custom hook takes an object with four properties: startValue, endValue, elementRef and options.
  *
@@ -53,7 +44,7 @@ const useLinearValue = ({
       value.current = getLinearValueFromOptions(optionsParams);
     }
   }, [y]);
-  return clamp(startValue, endValue, value.current);
+  return value.current;
 };
 
 export default useLinearValue;

src/lib/hooks/useLinearValue.ts

@@ -1,6 +1,6 @@
 import React, { RefObject, useContext, useLayoutEffect, useRef } from "react";
 import ScrollContext from "../context/ScrollContext";
-import { Coors, ProximityState } from "../types";
+import { ProximityState } from "../types";
 import getProximity from "../utils/calculations/proximity/getProximity";
 import validateRef from "../utils/validations/hooks/validateRef";
 import validateScrollValue from "../utils/validations/hooks/validateScrollValue";