### Install Project Dependencies

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

Before starting local development, all project dependencies must be installed. This command uses npm to fetch and install all required packages.

```bash
npm install
```

--------------------------------

### Install react-intersection-observer-hook

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/README.md

Instructions on how to install the `react-intersection-observer-hook` package using npm.

```sh
npm install react-intersection-observer-hook
```

--------------------------------

### Start Local Development Server

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

To run the demo Next.js application and test local changes to `react-intersection-observer-hook`, execute this command. The application will be accessible at `http://localhost:3000`.

```bash
npm run dev
```

--------------------------------

### Install react-intersection-observer-hook

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/packages/react-intersection-observer-hook/README.md

This command installs the `react-intersection-observer-hook` package using npm, making it available for use in your React project.

```sh
npm install react-intersection-observer-hook
```

--------------------------------

### Basic Usage of useIntersectionObserver Hook in React

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/packages/react-intersection-observer-hook/README.md

This example demonstrates how to use the `useIntersectionObserver` hook to track the visibility of a React component. It returns a `ref` to attach to the observed element and an `entry` object containing intersection details, such as `isIntersecting`.

```jsx
import React, { useEffect } from 'react';
import { useIntersectionObserver } from 'react-intersection-observer-hook';
// ...

function Example() {
  // `useIntersectionObserver` returns a tuple.
  // We need to give this `ref` callback to the node we want to observe.
  // The second item, `entry` is the response of the `IntersectionObserver` instance.
  const [ref, { entry }] = useIntersectionObserver();
  const isVisible = entry && entry.isIntersecting;

  return (
    <div>
      <p>Component is {isVisible ? 'visible' : 'not visible'}.</p>
      <SomeComponentToTrack ref={ref} />
    </div>
  );
}
```

--------------------------------

### Using useTrackVisibility Hook for Simple Visibility Tracking

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/packages/react-intersection-observer-hook/README.md

This example demonstrates the `useTrackVisibility` hook, which simplifies tracking an element's visibility. It provides a `ref` for the observed element and an `isVisible` boolean, along with `entry` and `rootRef` for advanced use. The `once` option can be used to keep `isVisible` true after the first intersection.

```jsx
import React, { useEffect } from 'react';
import { useTrackVisibility } from 'react-intersection-observer-hook';
// ...

function Example() {
  // `useTrackVisibility` also returns a tuple like `useIntersectionObserver`.
  // First item is the same `ref` callback to set the node to observe.
  // Second item is an object that we can use to decide if a node is visible.
  // `entry`: Same object which is returned by `useIntersectionObserver`.
  // `rootRef`: Same ref callback which is returned by `useIntersectionObserver`.
  // `isVisible`: Becomes `true`/`false` based on the response of `IntersectionObserver`.
  const [ref, { entry, rootRef, isVisible }] = useTrackVisibility({
    // In addition to the `IntersectionObserver` arguments, you can use `once` flag
    // to watch the visibility of an element once, so `isVisible` stays `true` after the element is visible for the first time.
    // once: true,
  });

  return (
    <div>
      <p>Component is {isVisible ? 'visible' : 'not visible'}.</p>
      <SomeComponentToTrack ref={ref} />
    </div>
  );
}
```

--------------------------------

### Using useIntersectionObserver with a Custom Scrollable Root

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/packages/react-intersection-observer-hook/README.md

This example shows how to specify a custom scrollable container as the root element for the `IntersectionObserver`. The `rootRef` callback returned by `useIntersectionObserver` is used to assign the container, allowing observation relative to that specific scroll area.

```jsx
import React, { useEffect } from 'react';
import { useIntersectionObserver } from 'react-intersection-observer-hook';
// ...

function Example() {
  const [ref, { entry, rootRef }] = useIntersectionObserver();
  const isVisible = entry && entry.isIntersecting;

  return (
    <div>
      <p>Component is {isVisible ? 'visible' : 'not visible'}.</p>
      <ScrollableContainer
        // We use `rootRef` callback to set the root node.
        ref={rootRef}
      >
        <SomeComponentToTrack ref={ref} />
      </ScrollableContainer>
    </div>
  );
}
```

--------------------------------

### Build Package Distribution Bundle

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

Before publishing, this command builds the package bundle, creating or updating the `dist` folder for the `react-intersection-observer-hook` package. This output is consumed by clients.

```bash
npm run build:bundle
```

--------------------------------

### Publish Package to npm

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

After bumping the version and performing all necessary checks, this command publishes the new version of the `react-intersection-observer-hook` package to the npm registry.

```bash
npm publish -w react-intersection-observer-hook
```

--------------------------------

### Add New Project Contributor

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

Use this command to add a new contributor to the project using `all-contributors-cli`. It will prompt for necessary information to properly credit the contributor.

```bash
npm run contributors:add
```

--------------------------------

### Create Package Tarball for Inspection

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command creates a tarball of the `react-intersection-observer-hook` package, allowing inspection of its contents exactly as it would be uploaded to npm.

```bash
npm pack -w react-intersection-observer-hook
```

--------------------------------

### Run Publint Package Validation

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command uses `publint` to validate the package's output for ESM and CJS clients, ensuring it's correctly structured for publishing to npm.

```bash
npm run publint -w react-intersection-observer-hook
```

--------------------------------

### Dry Run Package Tarball Inspection

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command simulates the creation of a package tarball without actually creating the file, allowing a quick check of its contents before publishing.

```bash
npm pack --dry-run -w react-intersection-observer-hook
```

--------------------------------

### Run Prettier Code Formatting Checks

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command executes Prettier to check for consistent code formatting across the project. It helps maintain a uniform code style.

```bash
npm run format
```

--------------------------------

### Fix Prettier Code Formatting Issues

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

Run this command to automatically reformat code using Prettier, resolving any formatting inconsistencies and ensuring adherence to the project's formatting rules.

```bash
npm run format:fix
```

--------------------------------

### Run Are the Types Wrong Package Validation

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command uses `Are the Types Wrong` to check the package's type definitions, ensuring they are correctly configured for consumers.

```bash
npm run attw -w react-intersection-observer-hook
```

--------------------------------

### Run All Code Quality Checks

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command executes a suite of automated code quality checks, including ESLint, Prettier, and TypeScript, to ensure high code standards. It's typically run before committing changes.

```bash
npm run codequality
```

--------------------------------

### API Reference for useIntersectionObserver Hook

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/README.md

Details the arguments available for the `useIntersectionObserver` hook, which configure the underlying Intersection Observer API.

```APIDOC
useIntersectionObserver(options?: object): [React.RefCallback<Element>, IntersectionObserverEntry]
  options:
    rootMargin?: string
      Description: Indicates the margin value around the root element. Default value is '0' for all directions (top, right, bottom and left).
    threshold?: number | number[]
      Description: Threshold value (or values) to trigger the observer.
```

--------------------------------

### API Reference for useTrackVisibility Hook

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/README.md

Details the arguments available for the `useTrackVisibility` hook, which extends `useIntersectionObserver` with an additional `once` option.

```APIDOC
useTrackVisibility(options?: object): [React.RefCallback<Element>, { entry: IntersectionObserverEntry, rootRef: React.RefCallback<Element>, isVisible: boolean }]
  options:
    rootMargin?: string
      Description: Indicates the margin value around the root element. Default value is '0' for all directions (top, right, bottom and left).
    threshold?: number | number[]
      Description: Threshold value (or values) to trigger the observer.
    once?: boolean
      Description: When set 'true', 'isVisible' stays as 'true' after the element is visible for the first time. Default 'false'.
```

--------------------------------

### Run ESLint Code Style Checks

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command specifically runs ESLint to check for code style and quality issues. It helps enforce coding standards and identify potential errors.

```bash
npm run lint
```

--------------------------------

### API Reference for useTrackVisibility Hook Arguments

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/packages/react-intersection-observer-hook/README.md

This section outlines the arguments for the `useTrackVisibility` hook. It accepts all arguments from `useIntersectionObserver` and introduces an additional `once` flag for specific visibility tracking behavior.

```APIDOC
useTrackVisibility arguments:
  (Inherits all arguments from useIntersectionObserver)
  once: boolean
    When set 'true', 'isVisible' stays as 'true' after the element is visible for the first time. Default 'false'.
```

--------------------------------

### Check for Dependency Updates

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command uses `npm-check-updates` to interactively scan for newer versions of all project dependencies across apps and packages, including root dependencies. It helps keep the project's dependencies up-to-date.

```bash
npm run updates
```

--------------------------------

### API Reference for useIntersectionObserver Hook Arguments

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/packages/react-intersection-observer-hook/README.md

This section details the configurable arguments for the `useIntersectionObserver` hook, which align with the standard Intersection Observer API options. These arguments control how the observer detects intersections.

```APIDOC
useIntersectionObserver arguments:
  rootMargin: string
    Indicates the margin value around the root element. Default value is '0' for all directions (top, right, bottom and left).
  threshold: number | number[]
    Threshold value (or values) to trigger the observer.
```

--------------------------------

### Basic Usage of useIntersectionObserver Hook

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/README.md

Demonstrates how to use the `useIntersectionObserver` hook to track a component's visibility. It returns a `ref` to attach to the observed element and an `entry` object containing intersection details like `isIntersecting`.

```jsx
import React, { useEffect } from 'react';
import { useIntersectionObserver } from 'react-intersection-observer-hook';
// ...

function Example() {
  // `useIntersectionObserver` returns a tuple.
  // We need to give this `ref` callback to the node we want to observe.
  // The second item, `entry` is the response of the `IntersectionObserver` instance.
  const [ref, { entry }] = useIntersectionObserver();
  const isVisible = entry && entry.isIntersecting;

  return (
    <div>
      <p>Component is {isVisible ? 'visible' : 'not visible'}.</p>
      <SomeComponentToTrack ref={ref} />
    </div>
  );
}
```

--------------------------------

### Tracking Component Visibility with useTrackVisibility Hook

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/README.md

Illustrates the usage of the `useTrackVisibility` hook, which provides a simplified API for tracking visibility. It returns `ref`, `entry`, `rootRef`, and a direct `isVisible` boolean, and supports an optional `once` flag.

```jsx
import React, { useEffect } from 'react';
import { useTrackVisibility } from 'react-intersection-observer-hook';
// ...

function Example() {
  // `useTrackVisibility` also returns a tuple like `useIntersectionObserver`.
  // First item is the same `ref` callback to set the node to observe.
  // Second item is an object that we can use to decide if a node is visible.
  // `entry`: Same object which is returned by `useIntersectionObserver`.
  // `rootRef`: Same ref callback which is returned by `useIntersectionObserver`.
  // `isVisible`: Becomes `true`/`false` based on the response of `IntersectionObserver`.
  const [ref, { entry, rootRef, isVisible }] = useTrackVisibility({
    // In addition to the `IntersectionObserver` arguments, you can use `once` flag
    // to watch the visibility of an element once, so `isVisible` stays `true` after the element is visible for the first time.
    // once: true,
  });

  return (
    <div>
      <p>Component is {isVisible ? 'visible' : 'not visible'}.</p>
      <SomeComponentToTrack ref={ref} />
    </div>
  );
}
```

--------------------------------

### Bump Package Minor Version

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command increments the minor number of the `react-intersection-observer-hook` package version (e.g., 0.0.x to 0.1.0), suitable for new features that are backward-compatible.

```bash
npm version minor -w react-intersection-observer-hook
```

--------------------------------

### Fix Auto-Fixable Code Quality Issues

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

Execute this command to run all automated code quality checks and automatically fix any auto-fixable issues identified by ESLint and Prettier. This helps maintain consistent code formatting and style.

```bash
npm run codequality:fix
```

--------------------------------

### Auto-Correct Package.json Errors

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command automatically corrects common errors in the `package.json` file of the package intended for publication. `npm publish` also performs these auto-fixes.

```bash
npm pkg fix -w react-intersection-observer-hook
```

--------------------------------

### Fix ESLint Code Style Issues

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

Use this command to automatically fix auto-fixable ESLint issues, ensuring the codebase adheres to defined style guidelines without manual intervention.

```bash
npm run lint:fix
```

--------------------------------

### Bump Package Patch Version

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command increments the patch number of the `react-intersection-observer-hook` package version (e.g., 0.0.0 to 0.0.1), suitable for small bug fixes or minor changes.

```bash
npm version patch -w react-intersection-observer-hook
```

--------------------------------

### Bump Package Major Version

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command increments the major number of the `react-intersection-observer-hook` package version (e.g., 0.x.y to 1.0.0), indicating significant changes that may include breaking changes.

```bash
npm version major -w react-intersection-observer-hook
```

--------------------------------

### Run TypeScript Type Checks

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/CONTRIBUTING.md

This command performs static type checking using TypeScript to identify type-related errors and ensure type safety within the project. There is no auto-fix option for TypeScript checks.

```bash
npm run typecheck
```

--------------------------------

### Using useIntersectionObserver with a Custom Root Container

Source: https://github.com/onderonur/react-intersection-observer-hook/blob/main/README.md

Shows how to specify a custom scrollable container as the root element for observation using the `rootRef` callback returned by `useIntersectionObserver`. This allows tracking visibility relative to a specific scroll area.

```jsx
import React, { useEffect } from 'react';
import { useIntersectionObserver } from 'react-intersection-observer-hook';
// ...

function Example() {
  const [ref, { entry, rootRef }] = useIntersectionObserver();
  const isVisible = entry && entry.isIntersecting;

  return (
    <div>
      <p>Component is {isVisible ? 'visible' : 'not visible'}.</p>
      <ScrollableContainer
        // We use `rootRef` callback to set the root node.
        ref={rootRef}
      >
        <SomeComponentToTrack ref={ref} />
      </ScrollableContainer>
    </div>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.