https://github.com/hrsh7th/react-inview-hook

react hooks & intersection-observer
https://github.com/hrsh7th/react-inview-hook

Last synced: 8 months ago
JSON representation

react hooks & intersection-observer

• Host: GitHub
• URL: https://github.com/hrsh7th/react-inview-hook
• Owner: hrsh7th
• Created: 2019-03-26T11:03:36.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-02-28T12:38:04.000Z (over 2 years ago)
• Last Synced: 2025-02-03T21:08:55.067Z (8 months ago)
• Language: TypeScript
• Size: 1.49 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-inview-hook

react-hooks with intersection-observer.

# Why?

This module will cache IntersectionObservers (group by IntersectionObserverInit).

That's reason is performance on IE11 with polyfill.

# Note

This module uses `Map` and `IntersectionObserver`

If you use this in es5 environment, should install polyfills below.

- `Map`

  - `@babel/polyfill` or `es6-map` etc.

- `IntersectionObserver`

  - `intersection-observer`

# Usage

```tsx

import React, { useState, useRef } from "react";

import { useInView } from "react-inview-hook";

export const SomeComponent = () => {

  const [isInView, setIsInView] = useState(false);

  const ref = useRef(null);

  useInView({

    ref,

    onEnter: () => setIsInView(true),

    onLeave: () => setIsInView(false)

  });

  return 
isInView? {isInView ? "true" : "false"}
;

};

```


# API

## useInView(props: UseInViewProps)

```ts

type UseInViewProps = {

  ref: React.RefObject;

  onEnter?: (entry: IntersectionObserverEntry) => void;

  onLeave?: (entry: IntersectionObserverEntry) => void;

  unobserveOnEnter?: boolean; // default: false

  root?: React.RefObject; // default: null

  rootMargin?: string; // default: '0px'

  threshold?: number | number[]; // default: 0

};

```