How to create sticky footer in ReactJS ?

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:

• NPM & Node.js
• React JS
• CSS Positioning Element

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.

// 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;

// Filename - Footer.js

import React from "react";

const Footer = () => (
    <footer className="footer">
        <p>This is react sticky footer!!</p>
    </footer>
);

export default Footer;

/* 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: