rootMarginstring'0px'Margin around the root. Can have values similar to the CSS margin property, e.g."10px 20px 30px 40px"(top, right, bottom, left). Also supports percentages, to check if an element intersects
importReactfrom'react';import'intersection-observer';// optional polyfillimportObserverfrom'@researchgate/react-intersection-observer';classExampleComponentextendsReact.Component{handleIntersection(event){console.log(event.isIntersecting);}render(){constoptions={onChange:this.handleIntersection,root:'#scrolling-con...
A simple example would be: importReactfrom'react';constonObserveSetAnimate=(elt:HTMLElement)=>elt.classList.add('animate');constFoo=()=>{constref=useIntersectionObserver(onObserveSetAnimate);returnhello,world;} I like how small and self-contained hooks can be, and writing them usually feels l...
import React from 'react'; import 'intersection-observer'; // optional polyfill import Observer from '@researchgate/react-intersection-observer'; class ExampleComponent extends React.Component { handleIntersection(event) { console.log(event.isIntersecting); } render() { const options = { onChange: ...
main 1Branch2Tags Code Folders and files Name Last commit message Last commit date Latest commit Cannot retrieve latest commit at this time. History 18 Commits example scripts src .editorconfig .gitattributes .gitignore .yarnrc CONTRIBUTING.md ...
Test Example importReactfrom"react";import{screen,render}from"@testing-library/react";import{useInView}from"react-intersection-observer";import{mockAllIsIntersecting,mockIsIntersecting,intersectionMockInstance,}from"react-intersection-observer/test-utils";constHookComponent=({options})=>{const{ref,inView}...
Example To trigger the animation only the first time an element enters the viewport: <Slide triggerOnce> I will animate only the first time you see me </Slide> Chaining Multiple Animations To chain together multiple animations, set the cascade prop to true: <Fade cascade> I enter first......
Example import{LazyLoad}from'react-observer-api';exportdefault()=>{conststyle={padding:10};return{<LazyLoadas="span"style={style}forceVisible><>...Component goes here...</></LazyLoad>}} For IE support, need to addpolyfill You can import the polyfill directly or use a service like polyfil...
Import effects fromReact Awesome Revealto your React component, for example theFadeeffect: import{Fade}from"react-awesome-reveal"; Then simply wrap the components you want to animate: <Fade>I will gently appear as I enter the viewport</Fade> Supported Effects...
Import effects fromReact Awesome Revealto your React component, for example theFadeeffect: import{Fade}from"react-awesome-reveal"; Then simply wrap the components you want to animate: <Fade>I will gently appear as I enter the viewport</Fade> Supported Effects...