📚 DOC: add CHANGELOG, update docs

Author: pettiboy

CHANGELOG.md

@@ -0,0 +1,18 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+
+## [2.1.0] - 2021-11-13
+
+### Added
+
+- Set `useBoxMethod` as default way to check if `Element` is in `viewport`.
+- Can be overridden by setting `useBoxMethod` to `false`.
+
+### Fixed
+
+- Problems when div to Spy is not `100vh`.
+
+## [2.0.1] (Beta) - 2021-11-9
+
+- Beta version to test `2.1.0` release.

README.md

@@ -110,10 +110,11 @@ import ScrollSpy from "react-ui-scrollspy";
 
 ### 🔧 Customize Attributes
 
-| Attributes         | Type     | Description                                               | Default               | Required |
-| :----------------- | :------- | :-------------------------------------------------------- | :-------------------- | :------- |
-| `useDataAttribute` | `string` | To customize the string after `data-`                     | `"to-scrollspy-id"`   | no       |
-| `activeClass`      | `string` | To customize the `class` added when the `Element` in view | `"active-scroll-spy"` | no       |
+| Attributes         | Type      | Description                                                                      | Default               | Required |
+| :----------------- | :-------- | :------------------------------------------------------------------------------- | :-------------------- | :------- |
+| `useDataAttribute` | `string`  | To customize the string after `data-`                                            | `"to-scrollspy-id"`   | no       |
+| `activeClass`      | `string`  | To customize the `class` added when the `Element` in view                        | `"active-scroll-spy"` | no       |
+| `useBoxMethod`     | `boolean` | Set to `false` if you want your spy to be active if 50% of that `div` is in view | `true`                | no       |
 
 ## 📝 Authors
 

package-lock.json

@@ -53,7 +53,7 @@ const ScrollSpy = ({
   useDataAttribute = "to-scrollspy-id",
   activeClass = "active-scroll-spy",
 
-  useBoxMethod = false,
+  useBoxMethod = true,
 }: ScrollSpyProps) => {
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
   const [navContainerItems, setNavContainerItems] = useState<NodeListOf<Element> | undefined>(); // prettier-ignore
@@ -85,17 +85,15 @@ const ScrollSpy = ({
   }, [navContainerItems]);
 
   const isVisible = (el: HTMLElement) => {
-    if (useBoxMethod) {
-      var rectInView = el.getBoundingClientRect();
+    const rectInView = el.getBoundingClientRect();
 
+    if (useBoxMethod) {
       const hitbox_top = window.innerHeight;
       const element_top = rectInView.top;
       const element_bottom = rectInView.top + window.innerHeight;
 
       return hitbox_top < element_bottom && hitbox_top > element_top;
     } else {
-      const rectInView = el.getBoundingClientRect();
-
       // this decides how much of the element should be visible
       const leniency = parentScrollContainerRef?.current
         ? parentScrollContainerRef?.current.offsetHeight * 0.5