bug fixes: multiple instance

Author: g30elipse

README.md

@@ -27,12 +27,13 @@ event whenever the component wrapped with `DetectSection` enters the viewport.
 This is a wrapper component for your scrollable component. Wrap your component with `ReactScrollDetect` and attach the `onChange` listener.
 
 ##### props
-| props    | signature               | required       | description |
-|------    | --------------         | ----           | ----------- |
-| onChange | (index: number) => void | false           | Function which is exectuted when a new section enters the viewport |
-| triggerPoint | 'center', 'top', 'bottom | false           | Trigger point for DetectSection (default: center) |
-| index    | number                  | false           | This spectifies which section(index) the needs to be scrolled to the viewport. Default value: 0 (note: this is an experimental feature)  |
+| props    | signature               | required   | default value     | description |
+|------    | --------------         | ----        | -----------       |
+| onChange | (index: number) => void | false      | () => null        | Function which is exectuted when a new section enters the viewport |
+| triggerPoint | 'center', 'top', 'bottom | false |         | Trigger point for DetectSection (default: center) |
+| index    | number                  | false      | 0    | This spectifies which section(index) the needs to be scrolled to the viewport.(note: this is an experimental feature)  |
 
+| offset    | number                  | false      |0     |The offset from the top (of the screen) for the scroll to snap |
 
 
 #### Example

dist/index.es.js

@@ -3,10 +3,11 @@ export declare type TriggerPoint = 'center' | 'top' | 'bottom';
 export declare type TSectionEntry = {
     height: number;
     index: number;
+    ref: HTMLDivElement;
 };
 export declare type ReactScrollDetectContextProviderValue = {
     onChange: (index: number) => void;
-    addSection: (section: TSectionEntry) => void;
+    addSection: (section: Omit<TSectionEntry, 'index'>) => void;
     sections: TSectionEntry[];
     triggerPoint: TriggerPoint;
     index: number;

dist/index.es.js.map

@@ -46,4 +46,4 @@
     "ts-jest": "^24.2.0",
     "typescript": "^3.7.4"
   }
-}
+}

dist/index.js

@@ -2,17 +2,16 @@ import React, { useRef, useContext, useEffect } from "react";
 import { ReactScrollDetectContext } from "./context";
 
 
-let INDEX = 0;
 
 export const DetectSection: React.FC = (props) => {
     const ref = useRef<HTMLDivElement>(null)
 
     const { addSection } = useContext(ReactScrollDetectContext);
-    const index = INDEX++;
     useEffect(() => {
-        const height = ref.current?.clientHeight || 0;
-        addSection({ index, height })
-    }, [])
+        if (!ref.current) return;
+        const height = ref.current.clientHeight || 0;
+        addSection({ height, ref: ref.current })
+    }, [ref])
 
 
 

dist/index.js.map

@@ -3,22 +3,29 @@ import { TSectionEntry, ReactScrollDetectContextProviderValue, ReactScrollDetect
 export interface ReactScrollDetectProps {
     onChange?: (index: number) => void
     index?: number
+    offset?: number
     triggerPoint?: TriggerPoint
 }
 
 
 const ReactScrollDetect: FC<ReactScrollDetectProps> = (props) => {
-    const { onChange = () => { }, index = 0, triggerPoint = 'center' } = props;
+    const { onChange = () => { }, index = 0, triggerPoint = 'center', offset = 0 } = props;
     const [sections, setSections] = useState<TSectionEntry[]>([])
+    let numSections = 0;
+
+    const addSection = (section: Omit<TSectionEntry, 'index'>) => {
+        setSections(sections => [...sections, { ...section, index: numSections++ }])
+    }
+
 
-    const addSection = (section: TSectionEntry) => setSections(sections => [...sections, section])
 
     const providerValue: ReactScrollDetectContextProviderValue = {
         onChange,
         addSection,
         sections,
         index,
-        triggerPoint
+        triggerPoint,
+        offset
     }
     return (
         <ReactScrollDetectContext.Provider value={providerValue}>
@@ -33,11 +40,12 @@ const WINDOW_HEIGHT = window.innerHeight;
 
 
 const _ScrollContainer: FC = (props) => {
-    const { sections, onChange, index, triggerPoint } = useContext(ReactScrollDetectContext);
+    const { sections, onChange, index, triggerPoint, offset = 0 } = useContext(ReactScrollDetectContext);
     const [sectionEntryPoints, setSectionEntryPoints] = useState<number[]>([])
     const [currentIndex, setCurrentIndex] = useState(0);
     const TRIGGER_CONST = triggerPoint === 'center' ? WINDOW_HEIGHT / 2 : triggerPoint === 'top' ? 0 : WINDOW_HEIGHT
 
+
     useEffect(() => {
         initializeEntryPoints()
     }, [sections])
@@ -48,14 +56,16 @@ const _ScrollContainer: FC = (props) => {
             setCurrentIndex(index)
             onChange(index)
         }
-        window.scrollTo({ top: sectionEntryPoints[index] || 0, behavior: 'smooth' })
+        window.scrollTo({ top: (sectionEntryPoints[index] || 0) + offset, behavior: 'smooth' })
     }, [index])
 
 
 
     const initializeEntryPoints = () => {
         const _sectionEntryPoints: number[] = [];
-        let prev = 0;
+        if (sections.length === 0) return;
+        // console.log("first section height", sections[0].ref.offsetTop, sections[0].ref)
+        let prev = sections[0].ref.offsetTop;
         sections.forEach(section => {
             _sectionEntryPoints.push(prev);
             prev = prev + section.height;