How to call a function when content of a div changes using jQuery ?

How to create sticky footer in ReactJS ?

Last Updated : 16 Nov, 2023

Creating a sticky footer in React jS is a common requirement when designing web applications or websites. A sticky footer remains fixed at the bottom of the screen, regardless of the content’s height. In this article, we will see how to create a sticky footer in ReactJS.

Prerequisites:

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app react-footer

Step 2: After creating your project folder i.e. react-footer, move to it using the following command:

cd react-footer

Project Structure:

Example: This example implement the sticky footer to the web page.

Javascript

// Filename - App.js
 
import React from "react";
 
// Importing the footer component
import Footer from "./Footer";
 
// Importing the styling of App component
import "./App.css";
 
const App = () => (
    <div className="App">
        <h3>GeeksforGeeks</h3>
        <h2>Sticky Footer using Reactjs!</h2>
        <Footer />
    </div>
);
 
export default App;

Javascript

// Filename - Footer.js
 
import React from "react";
 
const Footer = () => (
    <footer className="footer">
        <p>This is react sticky footer!!</p>
    </footer>
);
 
export default Footer;

CSS

/* Filename - App.css */
 
body {
    margin: 0;
    padding: 0;
    height: 1000px;
}
 
.App {
    color: #228b22;
    text-align: center;
}
 
.footer {
    background-color: green;
    border-top: 2px solid red;
    position: fixed;
    width: 100%;
    bottom: 0;
    color: white;
    font-size: 25px;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

How to call a function when content of a div changes using jQuery ?

A

archnabhardwaj

Improve

Article Tags :

Similar Reads

How to Create a Sticky Footer in Bootstrap?

In any webpage footer is the section that occurs at the end of the page. In many web pages, we can see that footers are sticky which means that whether we scroll up or down the page the footer will stay in its place which is at the bottom of the page. How to implement a sticky footer using Bootstrap

How to create a simple Responsive Footer in React JS ?

A responsive Footer in the React JS application is part of webpages that adjusts layout dynamically and signals to the user that they have reached the end of the webpage and provides useful links to other areas of the website that the user may want to visit. Preview Image of Final Output: Prerequisi

How to create Header in React JS ?

The Header is an important element of a websiteâ€™s design. It's the first impression of the website. It provides useful links to other areas of the website that the user may want to visit. In this article, we will create a functioning Header using React JS and Material UI. Prerequisites:NPM & Nod

How to Create a Sticky and Split Footer in Bootstrap ?

A sticky footer is a layout element used in web design that maintains a web page's footer fixed at the bottom of the viewport, no matter the content's height. This design feature improves the user experience and gives the website an attractive look by ensuring the footer is visible as users scroll t

How to create Dialog Box in ReactJS?

In modern web development, creating interactive and user-friendly interfaces is essential. One common element found in many applications is a dialog box. A dialog box is a component that appears on top of the main content to display information, receive user input, or prompt for confirmation. In thi

How To Create a Website in ReactJS?

ReactJS is one of the most popular JavaScript libraries for building user interfaces. It allows you to create dynamic, reusable UI components and efficiently manage state and events. In this article, we'll walk through the steps to create a basic website using ReactJS. PrerequisitesNPM & Node.js

How to use SnackBar Component in ReactJS ?

ReactJS provides developers with a wide range of components to create interactive and dynamic web applications. One such component is the SnackBar, which is commonly used to display temporary messages or notifications to users. Creating a SnackBar component allows for the presentation of these messa

How to Create Scroll Indicator using ReactJS ?

Scroll Indicator in React JS refers to a representation of the length of the page visited or present on the screen. It shows the amount the pages that have been scrolled. PrerequisiteNode.js & npm React JSstyled-componentsReact JS useState() hooks.Approach to create Scroll IndicatorTo create a S

How to use Container Component in ReactJS?

The container centers your content horizontally. It's the most basic layout element. Material UI for React has this component available for us and it is very easy to integrate. We can use the Container component in ReactJS using the following approach. Creating React Application And Installing Modul

How to create components in ReactJS ?

Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS. Table of Content React Functional C