HTMLPLUS

Intersection

This component provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. Its basic behavior is totally similar to standard intersection observer API. Its callback is executed whenever intersects with the viewport, or when the amount by which the two intersect changes by a requested amount.

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

PlusIntersection

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
behavior
Type
"appear" | "blink" | "normal""appear" | "blink" | "normal"
Default
'normal'
It specifies how intersection behaves with its children.
normal It doesn't have any effect on its children and the life cycles happen normally.
appear The children are removed from the first moment, and then they're brought back in when the element intersects with the viewport. In other words, the children are added to the DOM when the element intersects with the viewport and they are removed when the element leaves the viewport.
blink The children are removed from the DOM when the element intersects with the viewport and are brought back in the DOM immediately. With that said, it affects the life cycles of its children.
Name
disabled
Type
booleanboolean
Default
undefined
Disables the intersection's trigger.
Name
once
Type
booleanboolean
Default
undefined
It causes the callback to be called just once for the first time.
Name
root
Type
ElementElement
Default
undefined
The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target.
Defaults to the browser viewport if not specified or if null.
Name
rootMargin
Type
stringstring
Default
undefined
Margin around the root. Can have values similar to the CSS margin property, e.g.
"10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages.
This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections.
Defaults to all zeros.
Name
threshold
Type
number | number[]number | number[]
Default
undefined
Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5.
If you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1].
The default is 0 (meaning as soon as even one pixel is visible, the callback will be run).
A value of 1.0 means that the threshold isn't considered passed until every pixel is visible.
Name
default
The default slot.
Name
onChange
This event is triggered when its children intersects with the viewport in either coming to the viewport or going out of it.
Value
IntersectionObserverEntry

Below is a collection of simple to complex examples.

PreviewScriptStylesandboxEdit on CodeSandbox
import React, { useState } from "react";
import { Intersection, Card } from "@htmlplus/react";

const App = () => {
  const [intersecting, setIntersecting] = useState(false);

  const onChange = event => {
    setIntersecting(event.detail.isIntersecting);
  };

  return <>    
    <div className="container">      
      <div className="status">        
        {intersecting ? 'In Viewport' : 'Out of Viewport'}        
      </div>      
      <div className="content">        
        <div className="spacer"></div>        
        <Intersection onChange={event => onChange(event)}>          
          <Card elevation="10">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Card>          
        </Intersection>        
        <div className="spacer"></div>        
      </div>      
    </div>    
  </>;
};

export default App;
.container {
  position: relative;
  background-color: #EEEEEE;
}

.status {
  color: #FAFAFA;
  background-color: #212121;
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  z-index: 1;
}

.content {
  height: 20rem;
  overflow: auto;
}

.spacer {
  padding: 500px 0;
}

plus-card {
  width: 15rem;
  padding: 1rem;
  margin: auto;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Intersection, Card, Spinner } from "@htmlplus/react";

const App = () => {
  const onChange = event => {
    if (!event.detail.isIntersecting) return;
    setTimeout(() => {
      const image = event.target.querySelector('img');
      const spinner = event.target.querySelector('plus-spinner');
      const src = image.getAttribute('data-src');
      image.setAttribute('src', src);
      image.removeAttribute('data-hidden');
      spinner.setAttribute('data-hidden', 'true');
    }, 1000);
  };

  return <>    
    <div className="container">      
      <Intersection once onChange={event => onChange(event)}>        
        <Card elevation="10">          
          <Spinner></Spinner>          
          <img data-hidden="true" data-src="https://placekitten.com/200/200" alt="Lazy Image" />          
        </Card>        
      </Intersection>      
    </div>    
  </>;
};

export default App;
.container {
  position: relative;
  height: 20rem;
  overflow: auto;
  background-color: #EEEEEE;
}

plus-intersection {
  text-align: center;
  margin: 1000px auto;
}

[data-hidden] {
  display: none;
}

img {
  display: block;
  width: 12rem;
  height: 12rem;
  object-fit: cover;
}

plus-card {
  display: inline-block;
}

plus-spinner {
  margin: 1rem;
}
Contributors
Prev
Grid
Next
Portal
SELECT YOUR FRAMEWORK
React logo
React