Adding vanilla/jquery element to a React component

Question

I'd like to use the jQuery code below in a React component as a banner's background in a website. Importing the css worked, but neither importing nor placing the JS in render(){} worked. How can this be done?

codepen: https://codepen.io/dooblr/pen/BXwWyJ

html:

<div class="sea">
  <div class="bubblesContainer"></div>
</div>

css:

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

.sea {
  height: 19000px;
  background-image: linear-gradient(to bottom, #1cb5e0, #000046); 
  min-height: 100%;
  position: relative;
}

.bubbles {
  background: radial-gradient(transparent, #eef2f3);
  box-shadow: 0 0 4px #eef2f3, inset 0 0 8px #eef2f3;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
}

@keyframes bubblingUp {
 100% { transform: translatey(-1000px); }
}

js:

var scrollPosition = 0;

var numberBubbles = 200;
while (numberBubbles > 0){
  $(".bubblesContainer").append('<div class="bubbles"></div>');
numberBubbles--;
}

$( ".bubbles").each(function( index ) {
  var x = (Math.random() * ($('body').width()));
  var y = (Math.random() * ($('body').height()));
  var minSpeed = (Math.random() * 20);
  var speed = (minSpeed + Math.random() * 20 + 's');
  var widthHeight = Math.floor(Math.random() * 40)
  $(this).css({
    'left': x + 'px',
    'top': y + 'px',
    'width': widthHeight +"px",
    'height': widthHeight +"px",
    'animation': 'bubblingUp ' + speed + ' infinite ease-out'
  });
  var delay = Math.floor(Math.random() * 100);
  $(this).hide().delay(delay).fadeIn();
});

Saqib · Accepted Answer · 2019-08-03 06:05:45Z

In order to make it work, you have to understand how React works. This JQuery code of yours will do nothing. Since the DOM elements will not be rendered by the time it will run. So, you have to wait until the elements are rendered inside the DOM — the elements you are trying to access.

For this purpose, React provides lifecycle methods. A React component executes the following lifecycle methods (in the same order) when it is rendered.

Constructor — Constructor for your React component.
ComponentWillMount — Informing, the component is going to be mounted on DOM.
Render — Actually render the HTML on the DOM.
ComponentDidMount — Informing that your HTML has been rendered in the DOM.

So, you can use the React lifecycle hook ComponentDidMount to run your jQuery code. (You can read more about lifecycle methods here).

Next thing is since you are writing jQuery code inside your component, you need it to be accessible inside the component — $. In order to do that, you need to install jQuery as a dependency like any other package.

So, install jQuery using the following command:

npm install --save jquery;

Now, inside your React component, import it:

import $ from "jquery";

Then, inside your life cycle method ComponentDidMount, write your jQuery code.

Also, in the render method of component, return your HTML:

<div class="sea">
  <div class="bubblesContainer"></div>
</div>

Also, don't forget to add your CSS. I have also created a CodeSandBox working demo for you. Check it out. It will help.

Collectives™ on Stack Overflow

Adding vanilla/jquery element to a React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related