How can I transfer this Jquery function into a react function?

user_4682551 0
Viewed 43

My problem is I don't know how to implement the Jquery code into a react app

This is an alternating side coming in transform

I regularly use this code in my applications to add a little motion to the page, but I obviously can't use Jquery in react so how would I go about getting the same functionality in to a react app

Html Code

<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>

CSS Code

body {
 overflow-x: hidden;
}
.box-wrapper {
 -webkit-transition-duration: 600ms;
 transition-duration: 600ms;
}
.box-wrapper.loading:nth-child(odd) {
 transform: translate(100%);
}
.box-wrapper.loading:nth-child(even) {
 transform: translate(-100%);
}

Issue:

Javascript Code

$(".box-wrapper").each(function (index, element) {
 setTimeout(function () {
   element.classList.remove("loading");
 }, index * 600);
});
reactjs css-transforms css jquery
1 Answers

I have attached a simplistic example of how you can achieve the above functionality via React.

// Your entry component: App

import React, { useEffect, useState } from "react";

const App = () => {
  const boxArray = ["Box1", "Box2"];
  return (
    <>
      {boxArray.map((box, index) => {
        return <WrapperItem box={box} timeout={index * 600} key={index} />;
      })}
    </>
  );
};

const WrapperItem = ({ box, timeout }) => {
  const [loadingClass, setLoadingClass] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoadingClass(false);
    }, timeout);
  }, [timeout]);

  return (
    <div className={`boxWrapper ${loadingClass ? "loading" : ""}`}>
      <div className="box">
        <p>{box}</p>
      </div>
    </div>
  );
};

export default App;
// Place this in index.css

body {
  overflow-x: hidden;
}
.boxWrapper {
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}
.boxWrapper.loading:nth-child(odd) {
  transform: translate(100%);
}
.boxWrapper.loading:nth-child(even) {
  transform: translate(-100%);
}

This can be further optimized / refactored based upon your requirement, but this gives you a basic idea of how to accomplish with React what you have been doing with jQuery.

I would suggest you to have a look at React Transition Groups package, to have more granular control over transitions in React, when you start thinking of improving your initial functionality.

user_91444240
Related