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
// Filename - App.jsimport React from "react";import "./App.css";import Footer from "./components/Footer.js";function App() { return ( <div> <div style={{ minHeight: "400px", color: "green", }} > <h1>neveropen</h1> </div> <Footer /> </div> );}export default App; |
Javascript
// components/FooterStyles.jsimport styled from "styled-components";export const Box = styled.div` padding: 5% 2.5%; background: black; // position: absolute; bottom: 0; width: 95%; @media (max-width: 1000px) { // padding: 70px 30px; }`;export const FooterContainer = styled.div` display: flex; flex-direction: column; justify-content: center; max-width: 1000px; margin: 0 auto; /* background: red; */`;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
// Filename - components/Footer.jsimport 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:
