use-intersection - GitLite

KO | EN

gitlite — search

#react #ai #typescript #llm #android #linux #nodejs #java #awesome #kubernetes #pytorch #security #openai #open-source

use-intersection

(★ 109)

React Hooks for IntersectionObserver.

파일 탐색기

최종 버전 다운로드 (.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

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd use-intersection

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

$ yarn add use-intersection

이 명령어를 터미널에 그대로 입력해 실행하세요.

$ yarn add intersection-observer

이 명령어를 터미널에 그대로 입력해 실행하세요.

$ yarn storybook

이 명령어를 터미널에 그대로 입력해 실행하세요.

$ yarn test

이 명령어를 터미널에 그대로 입력해 실행하세요.

$ yarn lint

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 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)