use-intersection - GitLite

KO | EN

gitlite — search

#javascript #typescript #golang #machine-learning #rust #deep-learning #linux #docker #macos #awesome #ios #mcp #openai #open-source

use-intersection

(★ 109)

React Hooks for IntersectionObserver.

File Explorer

Download Latest Version (.zip)

- config.yml
- ISSUE_TEMPLATE.md
- PULL_REQUEST_TEMPLATE.md
- addons.js
- config.js
- preview-head.html
- webpack.config.js
- - .babelrc
  - .gitignore
  - next.config.js
  - package.json
  - README.md
  - tsconfig.json
  - yarn.lock
- - Demo.stories.tsx
- index.ts
- index.test.ts
.eslintignore
.eslintrc.js
.gitignore
.prettierignore
.prettierrc.js
CHANGELOG.md
jest-puppeteer.config.js
LICENSE
package.json
README.md
renovate.json
tsconfig.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/cats-oss/use-intersection

Downloads the entire project code from GitHub to your computer.

cd use-intersection

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

$ yarn add use-intersection

Type this command into your terminal and run it.

$ yarn add intersection-observer

Type this command into your terminal and run it.

$ yarn storybook

Type this command into your terminal and run it.

$ yarn test

Type this command into your terminal and run it.

$ yarn lint

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# use-intersection

[![npm](https://img.shields.io/npm/v/use-intersection.svg?style=flat-square)](https://www.npmjs.com/package/use-intersection)
[![CircleCI](https://img.shields.io/circleci/project/github/cats-oss/use-intersection/master.svg?style=flat-square)](https://circleci.com/gh/cats-oss/use-intersection)

> [React Hooks](https://reactjs.org/docs/hooks-intro.html) for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

:dog: See [Storybook](https://cats-oss.github.io/use-intersection/).

## Installation

```bash
$ yarn add use-intersection
```

## Usage

### Basic

This is the simplest example.

```typescript
import React, { useRef } from 'react';
import { useIntersection } from 'use-intersection';

const Component: React.FC = () => {
  const target = useRef<HTMLDivElement>(null);
  const intersecting = useIntersection(target);

return <div ref={target}>{intersecting ? 'visible' : 'invisible'}</div>;
};
```

### Custom Root Element

This is an example of using scrollable elements other than Viewport.

```typescript
import React, { useRef } from 'react';
import { useIntersection } from 'use-intersection';

const Component: React.FC = () => {
  const root = useRef<HTMLDivElement>(null);
  const target = useRef<HTMLDivElement>(null);
  const intersecting = useIntersection(target, {
    root,
    rootMargin: '100px',
  });

return (
    <div style={{ overflow: 'hidden auto', height: 300 }}>
      {/* ... */}
      <div ref={target}>{intersecting ? 'visible' : 'invisible'}</div>
      {/* ... */}
    </div>
  );
};
```

### Lazy Image

This is an example of an Image component that delays loading.

```typescript
import React, { useRef } from 'react';
import { useIntersection } from 'use-intersection';

const LazyImage: React.FC<React.ComponentProps<'img'>> = (props) => {
  const target = useRef<HTMLSpanElement>(null);
  const intersected = useIntersection(target, {
    rootMargin: '250px',
    once: true,
  });

return <span ref={target}>{intersected && <img {...props} />}</span>;
};
```

## Browser support

Supports modern web browser.

If your browser does not support `IntersectionObserver`, we recommend using Polyfill.

### npm package

```bash
$ yarn add intersection-observer
```

> https://www.npmjs.com/package/intersection-observer

### CDN

```html
<script src="https://polyfill-fastly.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"></script>
```

> https://polyfill-fastly.io/v3/

## API

The following resources will help you.

- [React Hooks](https://reactjs.org/docs/hooks-intro.html)
- [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

---

### `useIntersection`

`useIntersection` returns a flag whether the target intersects.

```typescript
const useIntersection = (
  target: React.RefObject<Element> | Element | null,
  options: IntersectionOptions = {},
  callback?: IntersectionChangeHandler,
) => boolean;
```

### `options: IntersectionOptions`

```typescript
type IntersectionOptions = {
  root?: React.RefObject<Element>;
  rootMargin?: string;
  threshold?: number | number[];
  once?: boolean;
  defaultIntersecting?: boolean;
};
```

### `callback: IntersectionChangeHandler`

```typescript
type IntersectionChangeHandler = (entry: IntersectionObserverEntry) => void;
```

## CHANGELOG

See [CHANGELOG.md](./CHANGELOG.md).

## Contributing

We are always welcoming your contribution :clap:

1. Fork (https://github.com/cats-oss/use-intersection) :tada:
1. Create a feature branch :coffee:
1. Run test suite with the `$ yarn test` command and confirm that it passes :zap:
1. Commit your changes :memo:
1. Rebase your local changes against the `master` branch :bulb:
1. Create new Pull Request :love_letter:

Bugs, feature requests and comments are more than welcome in the [issues](https://github.com/cats-oss/use-intersection/issues).

### Development scripts

#### `yarn storybook`

Run Storybook.

```bash
$ yarn storybook
```

#### `yarn test`

Run Unit test with Jest.

```bash
$ yarn test
```

#### `yarn lint`

Run lint with ESLint.

```bash
$ yarn lint
```

#### `yarn format`

Run formatting with ESLint (`--fix`) and Prettier.

```bash
$ yarn format
```

## License

[MIT © Cyberagent, Inc](./LICENSE)