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]