feat: Add once-option

Author: lessp

README.md

@@ -67,6 +67,7 @@ import { useIsVisible } from "react-is-visible"
 const SomeComponent = () => {
   const nodeRef = useRef()
   const isVisible = useIsVisible(nodeRef)
+  /* const isVisible = useIsVisible(nodeRef, { once: true }) */
 
   return (
     <h1 ref={nodeRef}>
@@ -85,6 +86,7 @@ import { withIsVisible } from "react-is-visible"
 const SomeComponent = ({ isVisible }) => <h1>{isVisible && `I'm visible!`}</h1>
 
 export default withIsVisible(SomeComponent)
+/* export default withIsVisible(SomeComponent, { once: true }) */
 ```
 
 or as a decorator
@@ -105,12 +107,14 @@ class SomeClass extends React.Component {
 
 #### [Render Prop](#render-prop)
 
+The `once`-prop is optional, but if passed, the `isVisible`-flag will only trigger once.
+
 ```jsx
 import React from "react"
 import IsVisible from "react-is-visible"
 
 const App = () => (
-  <IsVisible>
+  <IsVisible once>
     {isVisible => <h1>{isVisible ? `I'm visible!` : `I'm not visible!`}</h1>}
   </IsVisible>
 )

src/IsVisible.js

@@ -25,6 +25,10 @@ class IsVisible extends React.PureComponent {
         isVisible: isIntersecting,
       })
     }
+
+    if (isIntersecting && this.props.once) {
+      this.unwatch() 
+    }
   }
 
   render() {

src/__tests__/hook.spec.js

@@ -15,7 +15,7 @@ const FunctionalComponent = props => {
 
 describe('useIsVisible', () => {
   it('renders', () => {
-    const { getByText, unmount, rerender } = render(
+    const { getByText, rerender } = render(
       <FunctionalComponent>Functional</FunctionalComponent>
     )
 
@@ -25,7 +25,7 @@ describe('useIsVisible', () => {
   })
 
   it('passes its state as props to a Functional Component', () => {
-    const { getByTestId, unmount, rerender } = render(
+    const { getByTestId, rerender } = render(
       <FunctionalComponent>Functional</FunctionalComponent>
     )
 

src/useIsVisible.js

@@ -2,11 +2,19 @@ import { useEffect, useState } from 'react'
 
 import VO from './VisibilityObserver'
 
-function useIsVisible(nodeRef) {
+const defaultOptions = {
+  once: false,
+};
+
+function useIsVisible(nodeRef, { once } = defaultOptions) {
   const [isVisible, setVisible] = useState(false)
 
   function handleVisibilityChange({ isIntersecting }) {
     setVisible(isIntersecting)
+
+    if (isIntersecting && once) {
+      VO.unwatch(nodeRef.current)
+    }
   }
 
   useEffect(() => VO.watch(nodeRef.current, handleVisibilityChange), [

src/withIsVisible.js

@@ -7,9 +7,14 @@ import IsVisible from './IsVisible'
 const getDisplayName = WrappedComponent =>
   WrappedComponent.displayName || WrappedComponent.name || 'Component'
 
-export const withIsVisible = WrappedComponent => {
+const defaultOptions = {
+  once: false,
+};
+
+export const withIsVisible = (WrappedComponent,  { once } = defaultOptions)=> {
   const WithIsVisible = ({ forwardedRef, ...props }) => (
     <IsVisible
+      once={once}
       children={isVisible => (
         <WrappedComponent {...props} isVisible={isVisible} ref={forwardedRef} />
       )}

stories/asHOC.md

@@ -4,6 +4,13 @@
 
 **Component definition:** 
 
+Optionally takes a config-object as a second argument. The currently supported configurations are:
+```js
+{
+  once: bool
+}
+```
+
 ```jsx
 import React from 'react'
 import { withIsVisible } from 'react-is-visible'
@@ -17,6 +24,21 @@ const SomeComponent = ({ isVisible }) => (
 export default withIsVisible(SomeComponent)
 ```
 
+or 
+
+```jsx
+import React from 'react'
+import { withIsVisible } from 'react-is-visible'
+
+const SomeComponent = ({ isVisible }) => (
+  <h1>
+    {isVisible && `I'm visible!`}
+  </h1>
+)
+
+export default withIsVisible(SomeComponent, { once: true })
+```
+
 ------------
 
 **How to use:**

stories/asHook.md

@@ -4,6 +4,13 @@
 
 **Component definition:** 
 
+Optionally takes a config-object as a second argument. The currently supported configurations are:
+```
+{
+  once: bool
+}
+```
+
 ```jsx
 import React, { useRef } from 'react'
 import { useIsVisible } from 'react-is-visible'
@@ -20,6 +27,24 @@ const SomeComponent = () => {
 }
 ```
 
+or
+
+```jsx
+import React, { useRef } from 'react'
+import { useIsVisible } from 'react-is-visible'
+
+const SomeComponent = () => {
+  const nodeRef = useRef()
+  const isVisible = useIsVisible(nodeRef, { once: true })
+
+  return (
+    <h1 ref={nodeRef}>
+      {isVisible && `I'm visible!`}
+    </h1>
+  )
+}
+```
+
 ------------
 
 **How to use:** 

stories/asRenderProp.md

@@ -4,17 +4,19 @@
 
 **How to use:**
 
+The `once`-prop is optional, but if passed, the `isVisible`-flag will only trigger once.
+
 ```jsx
 import React from 'react'
 import IsVisible from 'react-is-visible'
 
 const SomeComponent = () => (
-  <IsVisible>
+  <IsVisible once>
     {isVisible => (
       <h1>
         {isVisible && `I'm visible!`}
       </h1>
     )}
   </IsVisible>
 )
-```
+```

stories/index.stories.js

@@ -80,7 +80,7 @@ storiesOf('React Is Visible', module)
     () => (
       <div style={wrapperStyling({ height: '200vh' })}>
         <h2 style={{ color: 'black', marginBottom: 'auto' }}>Scroll down</h2>
-        <IsVisible>
+        <IsVisible once>
           {isVisible => (
             <FunctionalComponent isVisible={isVisible}>
               I'm visible!