How to create a simple Responsive Footer in React JS ?
Last Updated :
13 Oct, 2023
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:
Prerequisites
Steps to create the application
Step 1: You will start a new project using create-react-app so open your terminal and type:
npx create-react-app react-footer
Step 2: Now go to your react-footer folder by typing the given command in the terminal:
cd react-footer
Step 3: Install the dependencies required in this project by typing the given command in the terminal.
npm install --save styled-components
Step 4: Now create the components folder in src then go to the components folder and create two files by the name Footer.js and FooterStyles.js
Project Structure
The file structure in the project will look like this.
Dependencies list after installing packages
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"styled-components": "^6.0.9",
"web-vitals": "^2.1.4"
}
Example: In this example we will design a footer, for that we will need to manipulate the App.js file and other created components file. We will use Footer components from the style-components library for simple and efficient implementation of footer.
Javascript
import React from "react" ;
import "./App.css" ;
import Footer from "./components/Footer.js" ;
function App() {
return (
<div>
<div
style={{
minHeight: "400px" ,
color: "green" ,
}}
>
<h1>GeeksforGeeks</h1>
</div>
<Footer />
</div>
);
}
export default App;
|
Javascript
import styled from "styled-components" ;
export const Box = styled.div`
padding: 5% 2.5%;
background: black;
bottom: 0;
width: 95%;
@media (max-width: 1000px) {
}
`;
export const FooterContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
`;
export const Column = styled.div`
display: flex;
flex-direction: column;
text-align: left;
margin-left: 60px;
`;
export const Row = styled.div`
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(185px, 1fr)
);
grid-gap: 20px;
@media (max-width: 1000px) {
grid-template-columns: repeat(
auto-fill,
minmax(200px, 1fr)
);
}
`;
export const FooterLink = styled.a`
color: #fff;
margin-bottom: 20px;
font-size: 18px;
text-decoration: none;
&:hover {
color: green;
transition: 200ms ease- in ;
}
`;
export const Heading = styled.p`
font-size: 24px;
color: #fff;
margin-bottom: 40px;
font-weight: bold;
`;
|
Javascript
import React from "react" ;
import {
Box,
FooterContainer,
Row,
Column,
FooterLink,
Heading,
} from "./FooterStyles" ;
const Footer = () => {
return (
<Box>
<h1
style={{
color: "green" ,
textAlign: "center" ,
marginTop: "10px" ,
}}
>
A Computer Science Portal for Geeks!
</h1>
<FooterContainer>
<Row>
<Column>
<Heading>About Us</Heading>
<FooterLink href= "#" >
Aim
</FooterLink>
<FooterLink href= "#" >
Vision
</FooterLink>
<FooterLink href= "#" >
Testimonials
</FooterLink>
</Column>
<Column>
<Heading>Services</Heading>
<FooterLink href= "#" >
Writing
</FooterLink>
<FooterLink href= "#" >
Internships
</FooterLink>
<FooterLink href= "#" >
Coding
</FooterLink>
<FooterLink href= "#" >
Teaching
</FooterLink>
</Column>
<Column>
<Heading>Contact Us</Heading>
<FooterLink href= "#" >
Uttar Pradesh
</FooterLink>
<FooterLink href= "#" >
Ahemdabad
</FooterLink>
<FooterLink href= "#" >
Indore
</FooterLink>
<FooterLink href= "#" >
Mumbai
</FooterLink>
</Column>
<Column>
<Heading>Social Media</Heading>
<FooterLink href= "#" >
<i className= "fab fa-facebook-f" >
<span
style={{
marginLeft: "10px" ,
}}
>
Facebook
</span>
</i>
</FooterLink>
<FooterLink href= "#" >
<i className= "fab fa-instagram" >
<span
style={{
marginLeft: "10px" ,
}}
>
Instagram
</span>
</i>
</FooterLink>
<FooterLink href= "#" >
<i className= "fab fa-twitter" >
<span
style={{
marginLeft: "10px" ,
}}
>
Twitter
</span>
</i>
</FooterLink>
<FooterLink href= "#" >
<i className= "fab fa-youtube" >
<span
style={{
marginLeft: "10px" ,
}}
>
Youtube
</span>
</i>
</FooterLink>
</Column>
</Row>
</FooterContainer>
</Box>
);
};
export default Footer;
|
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...