# Intersection Observer Hooks

These hooks help you track when an element enters or leaves the viewport.

## Table of Contents

* [`useInView`](#useinview)
  * [Usage](#usage)
  * [Parameters](#parameters)
  * [Return value](#return-value)
  * [Demo](#demo)

## `useInView`

This hook just wraps the [`react-intersection-observer`](https://github.com/thebuilder/react-intersection-observer) library which uses internally the [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) API. As some old browsers don't support it, `useInView` also returns a `supported` prop indicating if it's supported or not.

### Usage

```javascript
import useInView from "@frontity/hooks/use-in-view";

const MyLazyElement = ({ children }) => {
  // Get the reference and the visibility status.
  const { ref, inView } = useInView({ triggerOnce: true });

  // Pass the reference to the container and render `children` if
  // the container is visible, or a placeholder otherwise.
  return <div ref={ref}>{inView ? children : <MyPlaceholder />}</div>;
};
```

### Parameters

It accepts a single object with the following props:

| Name              | Type                       | Default  | Required | Description                                                                                                                                                    |
| ----------------- | -------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`root`**        | Element                    | `window` | no       | The Element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport (`window`) if not specified or if null.       |
| **`rootMargin`**  | string                     | `"0px"`  | no       | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                             |
| **`threshold`**   | number or array of numbers | `0`      | no       | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
| **`triggerOnce`** | boolean                    | `false`  | no       | Only trigger this method once                                                                                                                                  |

### Return value

An object with the following properties:

| Name            | Type            | Description                                                                                                                                        |
| --------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`ref`**       | React.RefObject | React reference object pointing to the DOM element. It must be passed to the element you want to track.                                            |
| **`inView`**    | boolean         | Boolean indicating if the element is visible. The value is always `true` if *`supported`* is `false`.                                              |
| **`supported`** | boolean         | Boolean indicating if [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) is supported by the browser. |

### Demo

This [example project](https://github.com/frontity-demos/frontity-examples/blob/master/intersection-observer-hooks/README.md) shows how to use the Intersection Observer Hook `useInView` available in the `@frontity/hooks` package or directly implemented in some components available at `@frontity/components`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://api.frontity.org/frontity-packages/collections-packages/hooks/intersection-observer-hooks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.