Part of a series of reusable React Components, to be available as npm packages! Basic React UI - Footer. Simply enter values in as props, and the rest is taken care of for you!
Explore the docs »
View Demo -->
·
Report Bug
·
Request Feature
Table of Contents
[
| PROP | PROP-TYPE | DESCRIPTION |
|---|---|---|
| title | String |
Required. Ideally business name/your name. |
| logo | String |
Optional. Include image URL to your logo. Goes above title. |
| subtitle | String |
Optional. Brief description about yourself/business. |
| phonenumber | String |
Optional. |
String |
Optional. | |
| primaryFontColor | String |
Optional. Default is off-white |
| secondaryFontColor | String |
Optional. Default is slightly darker off-white. |
| copyright | String |
Required. Your name/business name. |
| copyrightColor | String |
Optional. Default is a light grey. |
| backgroundColor | String |
Optional. Default is mid-dark grey. |
String |
Optional. Link your Facebook profile! | |
| github | String |
Optional. Link your Github profile! |
String |
Optional. Link your LinkedIn profile! | |
String |
Optional. Link your Twitter profile. | |
| angellist | String |
Optional. Link your AngelList profile. |
| youtube | String |
Optional. Link your Youtube profile. |
| iconSize | String |
Optional. Default is 1.5rem. |
| iconColor | String |
Optional. Default is off-white. *if you specify this, note that on hover effects won't work! |
Create a "pages" object in the component you are using , like this, for example:
const pages = [
{
title: 'Company',
pageList: [
{
name: 'About',
link: '/about',
},
{
name: 'Locations',
link: '/careers',
},
{
name: 'Careers',
link: '/careers',
},
],
},
{
title: 'Legal',
pageList: [
{
name: 'Privacy',
link: '/privacy',
},
{
name: 'Terms',
link: '/terms',
},
],
},
{
title: 'Help Center',
pageList: [
{
name: 'FAQ',
link: '/faq',
},
{
name: 'Return Policy',
link: '/returnpolicy',
},
],
},
];| PROP | PROP-TYPE | DESCRIPTION |
|---|---|---|
| title | String |
Required. A nav heading for each list of pages. |
| pageList | Array |
Required. An array of objects with name and link for each page you'd like in your secondary nav. |
| pageList.name | String |
Required. Name of page. |
| pageList.link | String |
Required. Link to page. |
- Clone the repo
git clone https://github.com/bmumz/basic-react-ui-footer
- Install NPM packages
npm install
- Run npm start
npm start
Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Your Name - Portfolio - LinkedIn @brandiCodes on Twitter - [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent