Footer component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Footer component for React using some CSS styles from Bootstrap as well as custom CSS styles.

https://www.npmjs.com/package/library-footer-component

Install and save component as a dependency

npm install --save library-footer-component

Import component into your app


import Footer from 'library-footer-component'

Create an array of objects with the keys being name and route


const footerData = [
    {
        name: "Item 1",
        route: "/",
    },
    {
        name: "Item 2",
        route: "/"
    },
    {
        name: "Item 3",
        route: "/",
    },
]

Optional: Create an array of objects with the keys being icon and route for social media


const footerSocial = [
    {
        icon: "fab fa-facebook-f",
        route: "/",
    },
    {
        icon: "fab fa-twitter",
        route: "/"
    },
    {
        icon: "fab fa-youtube",
        route: "/",
    },
    {
        icon: "fab fa-linkedin-in",
        route: "/",
    },
    {
        icon: "fab fa-instagram",
        route: "/",
    },
]

Render the component with the object arrays we created as well as any other props that are needed


render () {
    const footerData = [
        {
            name: "Item 1",
            route: "/",
        },
        {
            name: "Item 2",
            route: "/"
        },
        {
            name: "Item 3",
            route: "/",
        },
    ]

    const footerSocial = [
        {
            icon: "fab fa-facebook-f",
            route: "/",
        },
        {
            icon: "fab fa-twitter",
            route: "/"
        },
        {
            icon: "fab fa-youtube",
            route: "/",
        },
        {
            icon: "fab fa-linkedin-in",
            route: "/",
        },
        {
            icon: "fab fa-instagram",
            route: "/",
        },
    ]

    return (
        <FooterComponent
            footerData={footerData}
            footerSocial={footerSocial}
            footerTheme="dark"
            footerYear={true}
            footerColumns="2"
            footerLeftColumnAlignment="left"
            footerLeftColumnAlignment="right" />
    )
}

Prop Values
footerData Object
footerSocial Object
footerTheme light or dark
footerCopyright String
footerYear true or false
footerAlignment left, right, center
footerColumns 1 or 2
footerLeftColumnAlignment left, right, center
footerRightColumnAlignment left, right, center

Please note:

  • footerAlignment prop will override footerLeftColumnAlignment and footerRightColumnAlignment
  • footerLeftColumnAlignment and footerLeftColumnAlignment is available if 2 columns to align each column. If used, don’t use footerAlignment

Bronson Dunbar

I'm a WordPress fanatic, a fan of React & AWS and a Sass magician! I also enjoy capturing moments through the lens of my Canon https://adobe.ly/2HkE1SZ

Leave a Reply

Your email address will not be published. Required fields are marked *