# library-footer-component

> Footer component for React

Latest version **1.0.4** (published 2018-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install library-footer-component
pnpm add library-footer-component
yarn add library-footer-component
bun add library-footer-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-06-19 |
| First published | 2018-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 374.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | bronsond |

## Links

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

## Recent versions

- 1.0.4 (latest) — 2018-06-19
- 1.0.3 — 2018-06-19
- 1.0.2 — 2018-06-19
- 1.0.1 — 2018-06-19
- 1.0.0 — 2018-06-19

## README

# 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*

---
_Source: https://npm.io/package/library-footer-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._