Comments (7)
I had no problems using it like inView.is(element)
with Hooks.
from in-view.
Thanks.
but I can’t imagine how to write code with hooks.
Would you show me sample code here?
from in-view.
Sure, @theNewWave !
Imagine you have two sections which take the entire viewport's height (100vh) and we want to display the current section's name in a box which is on the screen right now. I've put together a quick demo over at codesandbox.io
Code:
import React, { useRef, useState, useEffect } from "react";
import inView from "in-view";
inView.threshold(0.5);
function App() {
const sectionA = useRef(null);
const sectionB = useRef(null);
const sections = [sectionA, sectionB];
const [visibleSection, setVisibleSection] = useState(false);
useEffect(() => {
const onScroll = () => {
sections.forEach(section =>
inView.is(section.current) ? setVisibleSection(section) : null
);
};
onScroll();
document.addEventListener("scroll", onScroll);
return () => document.removeEventListener("scroll", onScroll);
});
return (
<div className="App">
{visibleSection && (
<div className="CurrentSection">{visibleSection.current.innerHTML}</div>
)}
<div ref={sectionA} className="Section">
Section A
</div>
<div ref={sectionB} className="Section">
Section B
</div>
</div>
);
}
I hope this helps!
from in-view.
Thank you for kindly telling me the code!!
from in-view.
You're welcome!
from in-view.
I have trouble using it with React Router. It doesn't seem to work when I navigate through a route, then going back on the previous one. I use it to add class and trigger animations, but it doesn't work. Anyone ?
from in-view.
const sections = ['one', 'two', 'three', 'four', 'five'];
const [sectionInViewport, setSectionInViewport] = useState(null);
useEffect(() => {
sections.map(section => {
//each section is rendered with `#${id}` from list above, i.e. <div id='one'>...</>
inView(`#${section}`)
.on('enter', () => {
console.log(section);
setSectionInViewport(section);
})
/*.on('exit', el => {
//optional block
setSectionInViewport(null);
});*/
});
}, []);
from in-view.
Related Issues (20)
- Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. HOT 2
- inView.is Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null HOT 2
- Is there a way to set multiple offsets for different DOM nodes
- How to tell if a 200vh element is at top of view? HOT 1
- Simplify `enter` / `exit` events processing with callback: possible to pass the event type into the callback?
- IntersectionObserver support HOT 9
- Accept single, or array of DOM elements
- Dynamic offset ? HOT 2
- Uncaught TypeError: this.handlers[t][n] is not a function in-view.min.js:6 HOT 1
- still maintained? HOT 11
- Replace lodash with lodash-es
- Feature request: loop on elements revealed at same position (stagger elements sequentially)
- Custom parent
- inView.is(YOUR_SELECTOR) throws an error HOT 2
- Can we get a non-minified distribution file please? HOT 1
- Maybe this is a bad question, but trying to link script on a page yields this: HOT 5
- Tapping "Home" key does not fire enter / exit functions
- Get the data-attribute and classnames of the element on 'enter'?
- Not working in android WebView
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from in-view.