1.0.4 • Published 6 years ago

library-footer-component v1.0.4

Weekly downloads
-
License
MIT
Repository
-
Last release
6 years ago

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" />
	)
}
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
1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago