https://github.com/alejogs4/react-observe-component

https://github.com/alejogs4/react-observe-component

Last synced: about 13 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/alejogs4/react-observe-component
• Owner: alejogs4
• Created: 2020-01-20T15:45:32.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-29T08:28:04.000Z (about 2 months ago)
• Last Synced: 2024-11-10T22:41:09.476Z (6 days ago)
• Language: JavaScript
• Size: 331 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# Observe

Observe is a React component which makes use of [Intersection Observer API](https://ed.team) to notify through a declarative interface when the children element has been detected by the observer.

## Instalation

Install using yarn

```bash

yarn add react-observe-component

```

or using NPM

```bash

npm install react-observe-component

```

### Props

| Props        | Type           | Default | Required | Description |

| ------------- |:-------------:| :-----:| :--------:|------: |

| isIntersecting | `(entry) => void` 				| () => {} | false | Function which it will be executed if children element it is intersected |

| isNotIntersecting      | `(entry) => void`     |   () => {}| false | Function which it will be executed if children element it is not longer intersected |

| as      | string      |  div | false | Says which HTML tag it will be rendered by Observe component |

| onEndObserving | `() => void` | () => {} | false | Function which it will be executed as soon as the Observe component has left to observe children element |

| triggersOnce | Boolean      | false | false | Boolean value which indicates if after first isIntersecting execution Observer must no longer observe children element |

| unobserve | `(entry) => boolean`   | () => false | false | Boolean function that if returns true will make that Observe component left to observe children element |

| options | Intersection Observer options | {} | false | Intersection Observer options object |

### Options

| Name            | Type               | Default | Required |

| --------------- | ------------------ | ------- | -------- |

| root      | Element            | window  | false    |

| rootMargin  | string             | '0px'   | false |

| threshold   | number \| number[] | 0       | false

> For more information visit [Intersection observer docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

## Usage

```javascript

import React from "react"

import { Observe } from "react-observe-component"

function YourComponent() {

  function isIntersecting(entry) {

  }

  function isNotIntersecting(entry) {

  }

  function onEndObserving() {

  }

  const unobserve = (entry) => entry.intersectionRatio > 0.3

  return (

    

      1

      2

      3

      

        4

      

      5

    

  )

}

```

> This component receives every valid props which HTML tag defined in as prop can receive, An example of this is className prop in the above example

## useObserve hook

You could use useObserve hook to observe your element without create a new html tag, this hook receives as an object

the same options than Observe component

### Usage

```javascript

import React from "react"

import { useObserve } from "react-observe-component"

export const YourComponent = () => {

  const [inView, setIsInView] = React.useState(false)

  const { elementRef } = useObserve({

    isIntersecting: () => setIsInView(true),

    isNotIntersecting: () => setIsInView(false),

    options: {

      threshold: 0.5

    }

  })

  return (

    <>

      

        1

      

      

        2

      

      

        3

      

        

          4

        

        

          5

        

      

        {inView ? 'Visible' : 'No visible'}

      

    >

  )

}

```