joshwnj/react-visibility-sensor

Evaluate IntersectionObserver support

Open

#56 opened on Dec 16, 2016

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (2,300 stars) (198 forks)batch import
enhancementhelp wanted

Description

Suggested by @Andarist in https://github.com/joshwnj/react-visibility-sensor/pull/54#issuecomment-267279074

What would you say about implementing IntersectionObserver support? It could even be the default with scroll and interval being used only as a fallback settings. Its already implemented in 2 browsers.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

It would be cool to try this, and compare to the current approach. We can try the polyfill for browsers that don't support it yet:

https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill

http://caniuse.com/#search=Intersection

Contributor guide

Tech stack
reactjavascript
Domain
frontendperformance
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
React knowledgeIntersectionObserver APIPolyfill understanding
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
This issue involves implementing IntersectionObserver support in the react visibility sensor component. The idea was suggested in PR #54 (linked). To start, review the current component source code (likely in src/index.js or similar) and understand how it currently uses scroll/interval events. Then implement an IntersectionObserver based approach as the default, with scroll/interval fallback for unsupported browsers. The polyfill from WICG can be used for older browsers. Test the changes and compare performance with the current approach. Check the caniuse link for browser support. There is no linked PR, so this is open for contribution.