fix: the inView state could be reset with triggerOnce #311 (#312)

Author: thebuilder

src/InView.tsx

@@ -86,7 +86,9 @@ export class InView extends React.Component<
   handleNode = (node?: Element | null) => {
     if (this.node) {
       unobserve(this.node)
-      if (!node) this.setState({ inView: false, entry: undefined })
+      if (!node && !this.props.triggerOnce) {
+        this.setState({ inView: false, entry: undefined })
+      }
     }
     this.node = node ? node : null
     this.observeNode()

src/useInView.tsx

@@ -23,7 +23,12 @@ export function useInView(
     node => {
       if (ref.current) {
         unobserve(ref.current)
-        setState(initialState)
+
+        if (!options.triggerOnce) {
+          // Reset the state, unless the hook is set to only `triggerOnce`
+          // In that case, resetting the state would trigger another update.
+          setState(initialState)
+        }
       }
       if (node) {
         observe(

stories/Hooks.story.tsx

@@ -129,3 +129,8 @@ storiesOf('useInView hook', module)
       </HookComponent>
     </ScrollWrapper>
   ))
+  .add('Trigger once', () => (
+    <ScrollWrapper>
+      <HookComponent options={{ triggerOnce: true }} />
+    </ScrollWrapper>
+  ))