Footer component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    Technologies used: React, Bootstrap

    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" />
        )
    }
    PropValues
    footerDataObject
    footerSocialObject
    footerThemelight or dark
    footerCopyrightString
    footerYeartrue or false
    footerAlignmentleft, right, center
    footerColumns1 or 2
    footerLeftColumnAlignmentleft, right, center
    footerRightColumnAlignmentleft, 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 *