intersection-counter
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

Intersection Counter

A way to track the count of elements yet to enter the viewport.

This is a minimal hook that can be used to implement features such as showing count of unread messages in a messaging web app, for user analytics by tracking accurate product views as user scrolls through a product catalog in an ecommerce app, etc. This package has type support too.

Installation

npm install intersection-counter

yarn add intersection-counter

pnpm add intersection-counter

Usage

This is a basic example of how to use intersection-counter

Options here is IntersectionObserverInit

import { useIntersectionCounter } from "intersection-counter";

const options : IntersectionObserverInit = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0,
};

function App() {
  const { parentRef, count } = useIntersectionCounter(options);
  console.log(count);

  return (
    <div
      ref={parentRef}
    >
      {messages.map(message => (
        {/* children */}
      ))}
    </div>
  );
}

Readme

Keywords

none

Package Sidebar

Install

npm i intersection-counter

Weekly Downloads

0

Version

1.0.3

License

MIT

Unpacked Size

6 kB

Total Files

6

Last publish

Collaborators

  • exploreraadi_codes