Creating a sticky footer 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.
For working with ReactJS, we have to set up the project first.
Creating 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: It will look like the following.
Example: In this example, we will design a footer, for that we will need to manipulate the App.js file and App.css as well as the Footer.js file.
Footer.js
Javascript
import React from 'react';const Footer = () => ( <footer className="footer"> <p>This is react sticky footer!!</p> </footer>);export default Footer; |
App.css
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;} |
App.js
Javascript
import React from "react";// Importing the footer componentimport Footer from "./Footer";// Importing the styling of App componentimport "./App.css";const App = () => ( <div className="App"> <h3>neveropen</h3> <h2>Sticky Footer using Reactjs!</h2> <Footer /> </div>);export default App; |
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:
