Friday, October 30, 2020
therichposts@gmail.com
Bootstrap 4.5JavascriptReactjs

How to add wowjs in reactjs?

How to add wowjs in reactjs?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to add wowjs in reactjs?

Wow.js in Reactjs

Post Working:

Friends in this post, I am showing you wowjs working into my reactjs application and I have added bootstrap for application good looks. For working you can check the above video.

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials


Friends here is the code snippet and please use carefully:

1. Firstly, we need fresh reactjs setup and for this, we need to run below commands into our terminal and also we should have latest node version installed on our system:

You can avoid this if you already have react project

npx create-react-app therichpost

cd therichpost

npm start

 

2. Now we need to run below commands into our project terminal to get wowjs and bootstrap libraries:

npm install bootstrap --save

npm install wowjs

 

3. After all above set, now we need to add below code inside our src/App.js file or we can replace src/App.js code with below code if you are doing fresh project:

import React from 'react';

import './App.css';

//Calling bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

//Calling WOWjs
import WOW from 'wowjs';


class App extends React.Component {

// Defining WOW 
componentDidMount() {
  new WOW.WOW({
    live: false
}).init();
}
  
render() {
  return (

    //Wow js animation in HTML
    <div className="container text-center">
      <div className="jumbotron bg-sky">
      <h1>ReactJs</h1>
      <p>Animmations with WOWjs</p> 
    </div>
      <div className="row">
        <div className="col-sm-4 wow bounceInDown center" data-wow-delay="0.5s">
        <p className="circle bg-yellow">very ES	</p>
        </div>
        <div className="col-sm-4">
          <img className="wow fadeInDown img-thumbnail" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg" />  
        </div>
        <div className="col-sm-4 wow bounceInDown center" data-wow-delay="0.5s">
        <p className="circle bg-yellow">very ES	</p>
        </div>  
        <div className="col-sm-4 wow bounceInUp center" data-wow-delay="0.5s">
        <p class="circle bg-green">3 KiB only	</p>
        </div>
        <div className="col-sm-4">
          <img className="wow fadeInDown img-thumbnail" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg" />  
        </div>
        <div className="col-sm-4 wow bounceInUp center" data-wow-delay="0.5s">
        <p class="circle bg-green">3 KiB only	</p>
        </div>  
        <div className="col-sm-4 wow bounceInRight" data-wow-delay="0.5s">
        <p class="circle bg-red">so impress</p>
        </div>
        <div className="col-sm-4">
          <img className="wow fadeInDown img-thumbnail" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg" />  
        </div>
        <div className="col-sm-4 wow bounceInRight" data-wow-delay="0.5s">
        <p class="circle bg-red">so impress</p>
        </div>  
      </div>
  </div>
  );
  
}

}
export default App;

 

4. Now we need to add below css code into our src/App.css file:

.circle {
  margin: 25px 10px;
  width: 200px;
  color: #fff;
  font-size: 32px;
  line-height: 200px;
  text-align: center;
  height: 200px;
  border-radius: 100px;
}
.bg-yellow {
  background: #ffcc35;
}
.bg-green {
  background: #5bd5a0;
}
.bg-red {
  background: #eb3980;
}
.bg-sky{
  background-color: skyblue!important;
}

 

5. Now we need to call below style CDN into our projectname/public/index.html file inside head tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

 

This is it friends and if you have any kind of query or issue then please do comment below.

Friends, I make post to help other and easy to understand.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.