-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How can I use Parallax.js with React.js? #167
Comments
The same way you use any external JS library with React :) |
Thanks for taking the time to help everyone out @RROrg. @JoeyCurry please see below:
|
Why it's not working?
|
@pixzels set |
@pixzels It isn't working because there are no TypeScript type definitions for this package. In the error message it says you can
I would suggest going this route, rather than setting |
@brybrophy where do you suggest such a file should be added, and what should its contents be precisely? |
when I tried to |
@majidzeno please make some effort in helping us help you
… On 26. Sep 2018, at 15:05, Majid Eltayeb ***@***.***> wrote:
when I tried to console.log(this.scene) it returns undefined, I wrapped it in an if condition and it still returns undefined
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub <#167 (comment)>, or mute the thread
|
@reneroth I used
|
@reneroth Okay I solved the issue , I was fetching posts from API and I was trying to apply parallax to every single post , I used the solution that @wagerfield introduced, the issue was the refs, in React 16.3 it is recommended to use
|
Thank you for sharing your solution! :)
… On 27. Sep 2018, at 14:18, Majid Eltayeb ***@***.***> wrote:
@reneroth <https://github.com/reneroth> Okay I solved the issue , I was fetching posts from API and I was trying to apply parallax to every single post , I used the solution that @wagerfield <https://github.com/wagerfield> introduced, the issue was the refs, in React 16.3 it is recommended to use React.createRef() API and also after using ref it returns a node so to access the dom element you have to use current, to access all posts I had to give the posts container a ref and then loop through its children and give every single post a parallax in componentDidUpdate .. check out my component
`import React, { Component } from "react";
import Parallax from "parallax-js";
class Diary extends Component {
constructor(props) {
super(props);
this.state = {};
this.scene = React.createRef();
}
componentDidUpdate() {
if (this.scene) {
var childNodes = this.scene.current.childNodes;
var i;
for (i = 0; i < childNodes.length; i++) {
this.parallax = new Parallax(childNodes[i]);
}
} else {
return null;
}
}
componentWillUnmount() {
this.parallax.disable();
}
render() {
if (!this.state.pageData) return null;
const posts = this.state.pageData.map((post, index) => {
return (
<figure
data-depth="0.6"
className="diary-post__image"
style={{
backgroundImage: url(${ post._embedded["wp:featuredmedia"][0].media_details.sizes .medium.source_url })
}}
/>
{post.title.rendered}
{post.date}
);
});
return (
{posts}
);
}
}
export default Diary;
`
|
I switched to React library, a tons are much better for a SAP. |
Updated with hook version for those who are curious. const YourComponent = () => {
const sceneEl = useRef(null);
useEffect(() => {
const parallaxInstance = new Parallax(sceneEl.current, {
relativeInput: true,
hoverOnly: true
})
parallaxInstance.enable();
return () => parallaxInstance.disable();
}, [])
return (
<div ref={sceneEl}>
{/* html */}
</div>
)
} |
The sceneEl.current is always null for some reason so parallax doesnt understand what it is and throws an error. I tried to do it using getElementById but it just messes up the design of the app and doesnt apply the parallax effect. |
The solution posted by @kingdavidmartins works well. Are you sure sceneEl.current is the problem? I've had a mistake in my code, because I've been looking at the original answer and there's an attribute spelling mistake (made due to the React standard) - it should be "data-depth", instead of "dataDepth". That's what solved the lack of parallax in my case anyway. |
How resolved it? |
How can I use Parallax.js with React.js?
The text was updated successfully, but these errors were encountered: