Footer

The footer is an area at the bottom of a document page containing data common to other pages.

Preview

Usage

npm i react-hartan

import { Footer } from "react-hartan"

function App() {

  return (
    <>
      <Footer></Footer>
    </>
  )
}

export default App

Customization With Props

• footerList -> Required to be sent by the user, accepts an array of objects, where each element is an object of the structure:

{
    footerLinkHeading: "", 
    footerLinks: [
        {
            footerLinkName: "", 
            footerLinkSrc: "", 
        }
    ]
}

// footerLinks is an array of objects with above structure

NOTE: Keep the name of the keys same as above.

• copyrightYear -> Accepts a string value, a year which is shown in the footer.

• copyrightName -> Accepts a string value, a name to be shown in the footer.

• id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

• userFooterStyle -> Custom styling prop for the full footer section.

• userLinksStyle -> Custom styling prop for full links container.

• userFooterLinksStyle -> Custom styling prop for each link container inside the full links container.

• userLinksDataStyle -> Custom styling prop for link data container.

• userCopyrightStyle -> Custom styling prop for the copyright container.

Default

import { Footer } from "react-hartan"

function App() {

  return (
    <>
      <Footer></Footer>
    </>
  )
}

export default App

With Custom Props

// App.css
.bg-red{
   padding: 2rem;
   background-color: red;
}

.bg-pink{
   background-color: pink;
}


// App.jsx
import { Footer } from "react-hartan"

const list = [
  {
    footerLinkHeading: "Support",
    footerLinks: [
      {
        footerLinkName: "Gomtinagar and Daliganj, Lucknow",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "[e-mail]",
        footerLinkSrc: "mailto:[e-mail]"
      },
      {
        footerLinkName: "9999999999",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "9999999999",
        footerLinkSrc: ""
      }
    ]
  }
];

export default function App() {

  return (
    <>
      <Footer footerList={list} userFooterStyle={"bg-pink"} userFooterLinksStyle={"bg-red"}></Footer>
    </>
  )
}

Component Code

This is the code for Footer component.

Footer.jsx

import footerStyles from "./Footer.module.css"
import PropTypes from "prop-types"


export const footerLinksArray = [
  {
    footerLinkHeading: "Follow Us",
    footerLinks: [
      {
        footerLinkName: "GitHub",
        footerLinkSrc: "https://github.com/akkshayTandon/react-hartan-js"
      },
      {
        footerLinkName: "LinkedIn",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "Instagram",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "YouTube",
        footerLinkSrc: ""
      }
    ]
  },
  {
    footerLinkHeading: "Support",
    footerLinks: [
      {
        footerLinkName: "Gomtinagar and Daliganj, Lucknow",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "[e-mail]",
        footerLinkSrc: "mailto:[e-mail]"
      },
      {
        footerLinkName: "9999999999",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "9999999999",
        footerLinkSrc: ""
      }
    ]
  }
];

export default function Footer({ footerList = footerLinksArray, copyrightYear = "2024", copyrightName = "Hartan Library", id, userFooterStyle, userLinksStyle, userFooterLinksStyle, userLinksDataStyle, userCopyrightStyle }) {

  return (
    <footer id="" className={`${userFooterStyle}`}>

      <div className={`${footerStyles.links} ${userLinksStyle}`}>
        {footerList.map((footerLink, id) => {
          return (
            <div className={`${userFooterLinksStyle}`} key={id}>
              <h2>
                {footerLink.footerLinkHeading}
              </h2>
              <div className={`${footerStyles.linksdata} ${userLinksDataStyle}`}>
                {footerLink.footerLinks.map((link, id) => {
                  return (
                    <li key={id}>
                      <a href={link.footerLinkSrc}>
                        {link.footerLinkName}
                      </a>
                    </li>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      <div className={`${footerStyles.copyright} ${userCopyrightStyle}`}>
        <p>
          Copyright © {copyrightYear} {copyrightName} — All rights reserved by
          <strong> {copyrightName} </strong>
        </p>
      </div>

    </footer>
  );
}

Footer.propTypes = {
  footerList: PropTypes.arrayOf(PropTypes.shape({
    footerLinkHeading: PropTypes.node,
    footerLinks: PropTypes.arrayOf(PropTypes.shape({
      footerLinkName: PropTypes.node,
      footerLinksrc: PropTypes.string
    }))
  })),
  copyrightYear: PropTypes.string,
  copyrightName: PropTypes.string,
  id: PropTypes.string,
  userFooterStyle: PropTypes.string,
  userLinksStyle: PropTypes.string,
  userFooterLinksStyle: PropTypes.string,
  userLinksDataStyle: PropTypes.string,
  userCopyrightStyle: PropTypes.string
};

Footer.module.css

/* Footer Style */

/* footer section */
footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background-color: #f5f5f5;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

/* Links container */
.links {
    display: flex;
    gap: 7rem;
}

.links div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.linksdata li {
    list-style: none;
    cursor: pointer;
    font-size: 1.24rem;
    text-decoration: none;
    color: black;
}

.linksdata li a {
    text-decoration: none;
    color: #000000;
}

/* copyright container */
.copyright {
    font-size: 1.4rem;
}