How to create a sticky footer in React

In this tutorial, we are going to learn about how to create a sticky footer in React.

Creating a sticky footer

Inside your react app create a new file called footer.js and add the below code.

import React from "react";

const Footer = () => (
  <div className="footer">
    <p>This is some content in sticky footer</p>
  </div>
);

export default Footer;

In the above code, we have the <Footer> Component with div and p elements where footer class is added to the div element.

Now, let’s make the footer sticky by adding CSS styles to the footer class inside index.css file.

.footer{
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgb(235, 195, 64);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

Adding a sticky footer

At final, we need to add our <Footer> component to the App.js file by importing it.

import React from 'react';
import Footer from './footer'
const App = ()=>{
   return (
       <div className="App">
           <h1>Hello React</h1>
           <Footer/>       </div>
   )
}

export default App;

Sticky footer looks similar to the below image.