library-footer-component

Footer Component

Footer component for React

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