https://github.com/wpj/react-peekaboo
React hooks for monitoring an element's intersection with the viewport
https://github.com/wpj/react-peekaboo
intersectionobserver react
Last synced: 7 months ago
JSON representation
React hooks for monitoring an element's intersection with the viewport
- Host: GitHub
- URL: https://github.com/wpj/react-peekaboo
- Owner: wpj
- License: mit
- Created: 2019-03-19T19:36:57.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T14:24:29.000Z (about 3 years ago)
- Last Synced: 2025-07-01T11:05:12.226Z (7 months ago)
- Topics: intersectionobserver, react
- Language: TypeScript
- Homepage:
- Size: 2.22 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `react-peekaboo`
[](https://github.com/wpj/react-peekaboo/actions)
React hooks for monitoring an element's intersection with the viewport.
## Installation
```
npm install react-peekaboo
```
## Usage
```tsx
import React, { useState } from 'react';
import { useIntersecting, useIntersectionChange } from 'react-peekaboo';
function UseIntersectionExample() {
let [ref, isIntersecting] = useIntersecting();
return (
I am {isIntersecting ? 'visible' : 'not visible'}.
);
}
function UseIntersectionChangeExample() {
let [isIntersecting, onChange] = useState(false);
let ref = useIntersectionChange(onChange);
return (
I am {isIntersecting ? 'visible' : 'not visible'}.
);
}
```
## API
### Options
All functions accept a common set of options:
- `enabled?: boolean`: Enables/disables running the side effect that calculates
the element's intersection status. (default: `true`)
- `offsetBottom?: number`: Number of pixels to add to the bottom of the area
checked against when computing element intersection. (default: `0`)
- `offsetLeft?: number`: Number of pixels to add to the left of the area checked
against when computing element intersection. (default: `0`)
- `offsetRight?: number`: Number of pixels to add to the right of the area
checked against when computing element intersection. (default: `0`)
- `offsetTop?: number`: Number of pixels to add to the top of the area checked
against when computing element intersection. (default: `0`)
- `throttle?: number`: Number of ms to throttle scroll events (only applies in
environments that don't support IntersectionObserver or when using
`useScrollIntersection`/`useScrollIntersectionChangeCallback`). (default:
`100`)
### Exports
#### `useIntersecting`
Type: `(options: Options) => [RefCallback, boolean]`
Returns a ref and the element's intersection status using IntersectionObserver
or `scroll`/`resize` event listeners and `getBoundingClientRect` in unsupported
environments.
The ref returned must be attached to a DOM node.
#### `useIntersectionChange`
Type:
```typescript
(onChange: (isIntersecting: boolean) => void, options: Options) => RefCallback;
```
Runs a callback that receives the element's intersection status each time it
changes using IntersectionObserver or `scroll`/`resize` event listeners and
`getBoundingClientRect` in unsupported environments.
Returns a ref that must be attached to a DOM node.
#### `usePeekaboo`
Type:
```typescript
type SetupHandler = (
element: HTMLElement,
onChange: (isIntersecting: boolean) => void,
options?: Options,
) => TeardownHandler;
(
setup: SetupHandler,
onChange: (isIntersecting: boolean) => void,
options?: Options,
) => RefCallback;
```
Uses `setup` to run `onChange` when the element's intersection status changes.
You can pass `scroll`, `io`, or `peekaboo` from `dom-peekaboo` or implement your
own setup function.