npmpackage.info

Gathering detailed insights and metrics for use-element-in-view

Other packages similar to use-element-in-view

react-cool-inview

3.0.1

React hook to monitor an element enters or leaves the viewport (or another element).

use-hot-key-element-v2

1.0.1

Make Hot Key in view easier

use-simple-in-view

1.0.0

Simple React Hook is for monitoring when an element is in the viewport

use-hot-key-element

1.0.1

Make Hot Key in view easier

Gathering detailed insights and metrics for use-element-in-view

use-element-in-view - 1.0.3 | npmpackage.info

use-element-in-view

React hook that utilizes the Intersection Observer API to observe when an element enters and exits the viewport

1.0.3

MIT

TypeScript

56.35 kB

2.5

Installations

npm install use-element-in-view

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=10

Node Version

12.16.1

NPM Version

6.13.4 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

TypeScript

TypeScript (100%)

Developer

joshuaaron

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

4 Stars

35 Commits

1 Forks

1 Watchers

1 Branches

1 Contributors

Updated on Jan 12, 2021

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.0.3

Package Id

use-element-in-view@1.0.3

Unpacked Size

56.35 kB

Size

10.42 kB

File Count

NPM Version

6.13.4

Node Version

12.16.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react

Dev Dependencies

@testing-library/react @testing-library/react-hooks @types/react @types/react-dom eslint eslint-config-tsdx eslint-plugin-react-hooks husky lint-staged prettier react react-dom react-test-renderer tsdx tslib typescript

use-element-in-view

A simple React hook to track whether an element is visible in the viewport with the Intersection Observer. This API provides a native way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Browser support for the Intersection Observer is incredibly wide, you can view the full list here. However, if you need to support older browsers, you can add a polyfill from here.

Install

💡 Note: Since this module uses React Hooks, you'll need to have version >=16.8.0 of react and react-dom installed in your project

1npm install use-element-in-view --save-dev
2# or
3yarn add use-element-in-view --dev

Quick Start

1import React from 'react';
2import { useElementInView } from 'use-element-in-view';
3
4function App() {
5    const { inView, assignRef } = useElementInView();
6
7    return <div ref={assignRef}>In View? {inView}</div>;
8}

Using your own ref.

1import React, { useRef } from 'react';
2import { useElementInView } from 'use-element-in-view';
3
4function App() {
5    const ref = useRef<HTMLDivElement>(null);
6    const { inView } = useElementInView({ ref });
7
8    return <div ref={ref}>In View? {inView}</div>;
9}

You can view more examples on CodeSandbox (coming soon).

API

`useElementInView(options)`

1function useElementInView<T extends HTMLElement = HTMLElement>(
2    options?: IElementInViewOptions<T> = {}
3): IElementInViewResult<T>;

Arguments: `IElementInViewOptions<T>`

Note, all arguments are optional. The properties root, rootMargin and threshold are specific to the native Intersection Observer API and are forwarded along, more information can be found here

Argument	Type	Default value	Description
ref	`T \| RefObject<T> \| null`	`null`	Pass in your own ref instead of using the ref callback provided. This can be useful if you already have a ref inside your component you want to observe.
defaultInView	`boolean`	`false`	Set the default value for the inView property.
disconnectOnceVisible	`boolean`	`false`	Will disconnect the observer once the observed element has entered the viewport. A use-case for this is for lazy-loading images.
onChange	`(entry: IntersectionObserverEntry) => void`	`undefined`	Provide a callback that receives the full `IntersectionObserverEntry` as an argument that fires on each change of element intersection.
root	`Element \| null`	`null`	The `Element` or `Document` whose bounds are used as the bounding box when testing for intersection. If no root value was passed to the constructor or its value is null, the top-level document's viewport is used
rootMargin	`string`	`'0px'`	A string which specifies a set of offsets to add to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The syntax is approximately the same as that for the CSS `margin` property. The default is `"0px 0px 0px 0px"`.
threshold	`number \| number[]`	`0`	A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, `0` is used.

Returns: `IElementInViewResult<T>`

Argument	Type	Description
inView	`boolean`	Value representing if the observed element is visible in the viewport or not.
entry	`IntersectionObserverEntry \| undefined`	The full entry (`IntersectionObserverEntry`) returned from the Intersection Observer callback when invoked.
assignRef	`RefCallback<T>`	A callback ref to be assigned to your element. Note, if you do not pass in your own ref, this must be added to the element you wish to observe.
disconnect	`() => void`	Function that will disconnect the current observer instance shall you need to trigger this yourself.

Contributing

You can report bugs and issues here.

Pull-requests are more than welcome if you feel like you can improve or fix something 💥

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.5

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to use-element-in-view

Other packages similar to use-element-in-view

use-element-in-view

Installations

Developer Guide

No

CommonJS

>=10

12.16.1

6.13.4

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

joshuaaron

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

use-element-in-view

Install

Quick Start

Using your own ref.

API

useElementInView(options)

Arguments: IElementInViewOptions<T>

Returns: IElementInViewResult<T>

Contributing

License

10

10

10

0

0

0

0

0

0

0

0

0

0

2.5

/10

`useElementInView(options)`

Arguments: `IElementInViewOptions<T>`

Returns: `IElementInViewResult<T>`