How do I use Rellax.js with React?

Question

I am trying to use Rellax.js with React but am not able to understand how to use it. All I can find is https://www.npmjs.com/package/rellax#target-node. In that link, they give this code.

<div ref={ref => { this.rellaxRef = ref }}>
  I’m that default chill speed of "-2"
</div>

var rellax = new Rellax(this.rellaxRef)

How do I use that code with React hooks and what would the entire component look like. This is a very narrow view of the component.

score 12 · Accepted Answer · answered May 19 '20 at 09:06

You can use it something like this WITH HOOKS:

import React, { useRef, useEffect } from "react";
import Rellax from "rellax";

export default function App() {
  const rellaxRef = useRef();

  useEffect(() => {
    new Rellax(".animate", { // <---- Via class name
      speed: -10,
      center: false,
      wrapper: null,
      round: true,
      vertical: true,
      horizontal: false
    });

    new Rellax(rellaxRef.current, { // <---- Via useRef element
      speed: -10,
      center: false,
      wrapper: null,
      round: true,
      vertical: true,
      horizontal: false
    });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div ref={rellaxRef}>
        Lorem Ipsum is simply dummy text of the printing and typesetting
      </div>
      <div className="animate">I’m that default chill speed of "-2"</div>
    </div>
  );
}

WORKING DEMO (you can scroll and check)

I want to animate multiple divs at multiple speeds. will i have to create diffrent class method for each?(i dont want to do it with ref) — Abhishek Kokate, Mar 03 '22 at 05:25

How do I use Rellax.js with React?

1 Answers1