https://github.com/seonhyungjo/use-intersect

🥂Easy use Intersect Hooks
https://github.com/seonhyungjo/use-intersect

hooks intersection-observer react settimeout

Last synced: 3 months ago
JSON representation

🥂Easy use Intersect Hooks

• Host: GitHub
• URL: https://github.com/seonhyungjo/use-intersect
• Owner: SeonHyungJo
• License: mit
• Created: 2020-01-24T07:24:14.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:28:01.000Z (over 3 years ago)
• Last Synced: 2025-03-26T08:34:19.896Z (about 1 year ago)
• Topics: hooks, intersection-observer, react, settimeout
• Language: TypeScript
• Homepage: https://seonhyungjo.github.io/use-intersect/
• Size: 3.32 MB
• Stars: 5
• Watchers: 0
• Forks: 1
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


    

React useIntersect Hooks




[![NPM](https://img.shields.io/npm/v/use-intersect.svg)](https://www.npmjs.com/package//use-intersect) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)



## Install

```bash

npm install --save use-intersect

```

## Usage

```tsx

import * as React from 'react'

import useIntersect from 'use-intersect'

const option = {

  threshold: 0.8

}

const handleIntersect = (targetElement) ={

  console.log('intersect', targetElement)

}

const Example = () => {

  const targetRef = useIntersect(handleIntersect, {rootOptions: option, once:true})

  return (

    

  )

}

```

## API

### `useIntersect`

| Prop | Type | Required | Description |

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

| `onIntersect` | Function |    ✓     | Execute onItersect Function |

| `IntersectOptions` | IntersectOptions | | Intersect option |

### `IntersectOptions` type

| name | Type | Required | Description |

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

| `rootOptions` | `ObserverOptions` | | ObserverOptions |

| `once` | boolean | | [default:true] Trigger onItersect once |

### `ObserverOptions` type

| name | Type | Required | Description |

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

| `root` | Element \| null | | root Element |

| `rootMargin` | string | | Observer rootMargin |

| `threshold` | number | | Observer threshold |

> [[MDN]Reference](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)

## License

MIT © :mouse:[snyung](https://github.com/seonhyungjo)