InView

InView is a visibility detection utility that leverages the IntersectionObserver API to monitor when elements enter or leave the viewport. It provides customizable options for triggering events, delaying visibility changes, and dynamically adding CSS classes to elements based on their visibility state.

Example

Explore a live example in CodeSandbox:

Props

Static Props

Static properties are set during initialization and cannot be modified later.

Name	Description	Type	Default Value
hasOut	Determines whether elements leaving the viewport should trigger an event.	boolean	true
maxInitialDelay	Sets the maximum delay (in milliseconds) for initial element visibility. Delay is calculated based on element position.	number	1000
scrollDirection	Defines the primary scrolling axis used for delay calculations.	'horizontal' | 'vertical'	'vertical'

Mutable Props

Mutable properties can be updated at runtime using .updateProps().

Name	Description	Type	Default Value
enabled	Enables or disables the IntersectionObserver instance.	boolean	true
rootMargin	Specifies the root margin offsets for the IntersectionObserver, allowing fine-tuned visibility detection.	string	'0% 0% -5% 0%'

Accessors

note

All Module's accessors are available in this class.

elements

Type: Element[]

Returns all elements currently being observed.

isInitialStart

Type: boolean

Indicates whether the observation has started for the first time.

Methods

note

All Module's methods are available in this class.

addElement

Registers an element for visibility observation. If the element has a data-in-view-class attribute, the specified class will be applied upon entering the viewport.

const observable = instance.addElement(document.getElementById('element'));

// Stop observing the element
observable();

removeElement

Removes an element from observation, preventing further visibility tracking.

instance.removeElement(document.getElementById('element'));

updateProps

Dynamically updates instance properties.

instance.updateProps({
  enabled: false,
});

destroy

Destroys the instance and removes all observers.

instance.destroy();

Callbacks

note

All Module's callbacks are available in this class.

in

Fires when an element enters the viewport.

const destruct = instance.on('in', ({ element }) => console.log(element, 'entered viewport'));

// Cancel the callback
destruct();

out

Fires when an element leaves the viewport.

const destruct = instance.on('out', ({ element }) => console.log(element, 'left viewport'));

// Cancel the callback
destruct();