Footer component for React [NPM Package]

Reading Time: 1

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    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 *