All Projects β†’ the-road-to-learn-react β†’ react-intersection-observer-api-example

the-road-to-learn-react / react-intersection-observer-api-example

Licence: other
Showcasing of the Intersection Observer API in React with createRef()

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to react-intersection-observer-api-example

svelte-inview
A Svelte action that monitors an element enters or leaves the viewport.πŸ”₯
Stars: ✭ 358 (+2653.85%)
Mutual labels:  intersection-observer, intersectionobserver, intersectionobserver-api
React Intersection Observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
Stars: ✭ 2,689 (+20584.62%)
Mutual labels:  intersection-observer, intersectionobserver, intersectionobserver-api
intersection-observer-examples
Practical, real world examples of Intersection Observer
Stars: ✭ 14 (+7.69%)
Mutual labels:  intersectionobserver, intersectionobserver-api
react-intersection-observer-hook
React hook to use IntersectionObserver declaratively
Stars: ✭ 58 (+346.15%)
Mutual labels:  intersection-observer, intersectionobserver
BlazorIntersectionObserver
πŸ”Ž Intersection Observer API wrapper for Blazor applications
Stars: ✭ 35 (+169.23%)
Mutual labels:  intersectionobserver, intersectionobserver-api
stl-part-viewer
A lit-element web component that uses Three.js to display an STL model file.
Stars: ✭ 19 (+46.15%)
Mutual labels:  intersectionobserver
react-use-observer
Performant react hooks for WebApi Observers, useResizeObserver, useInteractionObserver, useMutationObserver
Stars: ✭ 19 (+46.15%)
Mutual labels:  intersection-observer
monolazy
Extended nanocomponent providing onEnter callback
Stars: ✭ 21 (+61.54%)
Mutual labels:  intersection-observer
LazyHTML
LazyHTML is an OpenSource Javascript Library that Supports Lazy Loading of any elements without Modifying Code, LazyHTML can lazy load Ads, Videos, Images, Widgets, Javascript, CSS, Inline-Javascript, Inline-CSS & Any HTML.
Stars: ✭ 47 (+261.54%)
Mutual labels:  intersection-observer
bs-react-is-visible
A small library that lets you know whether a component is visible on screen or not.
Stars: ✭ 15 (+15.38%)
Mutual labels:  intersection-observer
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 564 (+4238.46%)
Mutual labels:  intersection-observer
jsdom-testing-mocks
A set of tools for emulating browser behavior in jsdom environment
Stars: ✭ 37 (+184.62%)
Mutual labels:  intersectionobserver
impression
πŸ‘€Element view notifier
Stars: ✭ 77 (+492.31%)
Mutual labels:  intersection-observer
vue-observable
IntersectionObserver, MutationObserver and PerformanceObserver in Vue.js
Stars: ✭ 24 (+84.62%)
Mutual labels:  intersection-observer
react-infinite-scroll-list
Manage infinite list with the IntersectionObserver API
Stars: ✭ 20 (+53.85%)
Mutual labels:  intersection-observer
react-spring-pop
Animate React elements when they enter the viewport with physics based animations
Stars: ✭ 17 (+30.77%)
Mutual labels:  intersection-observer
vue-in-viewport-mixin
Vue 2 mixin to determine when a DOM element is visible in the client window
Stars: ✭ 99 (+661.54%)
Mutual labels:  intersection-observer
vue-visual
Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.
Stars: ✭ 56 (+330.77%)
Mutual labels:  intersectionobserver
progressive-image-loading
A live example of progressive image loading strategies
Stars: ✭ 49 (+276.92%)
Mutual labels:  intersectionobserver
svelte-intersection-observer
Detect if an element is in the viewport using the Intersection Observer API
Stars: ✭ 151 (+1061.54%)
Mutual labels:  intersection-observer

react-intersection-observer-api-example

Build Status Slack Greenkeeper badge

A simple application that showcases how Intersection Observer API can be used in React with createRef(). Use case: observe sections in an article and track the current viewed section in a navigation. Read more about it.

sep-06-2018 11-34-11

Features

  • intersection observer API
  • React's ref API with createRef() to reference DOM nodes
  • intersection observer API polyfill for browsers/testing

Installation

  • git clone [email protected]:the-road-to-learn-react/react-intersection-observer-api-example.git
  • cd react-intersection-observer-api-example
  • npm install
  • npm start
  • visit http://localhost:3000
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].