eargo-components

Eargo UI Components

Run package locally

npm install
npm link

To use in the project

npm install eargo-components
npm link eargo_components
import { NavBar } from 'eargo-components'

To unlink package

npm unlink eargo_components

To use package from publish version

npm install eargo-components
import { NavBar, Footer } from 'eargo-components'

Publish Package

We need paid account for publishing private packages.

npm i
npm build
npm login 
npm publish

Example

NavBar:

<NavBar history={history} />
<Footer history={history} />

Use to pass Props

yotpoKey {string}

Yotpo key is required for applying reviews star rating in header floating cart

history {react-router-dom's history instance}

Pass react-router-dom's history instance, this is required for menu navigation

promoBanner {object} (Optional)

Pass promoBanner if you want to apply promobanner in your header

menus {menuArray} (Optional)

Example:-

const addressUrl = "https://web-staging3.eargo.com/" // will varry according to environments
const menuArray = [
	{
		title: 'Our Solutions',
		url: `${addressUrl}`,
		parentClass: 'li_solution', // Add class name if you want to add some style with this class
		childClass: 'nav_solution', // Add class name if you want to add some style with this class of child element
		subMenuList: [
			{
				title: 'Hearing Aids',
				suburl: `${addressUrl}products-hearing-aids`,
			}
		]
	},
	{
		title: 'Eargo Difference',
		url: `${addressUrl}`,
		parentClass: 'li_difference',
		childClass: 'nav_difference',
		subMenuList: [
			{
				title: 'How It Works',
				suburl: `${addressUrl}eargo-difference`,
			}
		]
	},
	{
		title: 'Shop',
		url: '/',
		parentClass: 'li_store',
		childClass: 'nav_store',
		subMenuList: [
			{
			  address: '/eargo-neo-hifi',
			  optionImage: 'IMAGE_URL',
			  optionTitle: 'Eargo Neo HiFi',
			},
			{
			  address: '/eargo-neo',
			  optionImage: 'IMAGE_URL',
			  optionTitle: 'Eargo Neo'
			},
			{
			  address: '/eargo-max',
			  optionImage: 'IMAGE_URL',
			  optionTitle: 'Eargo Max'
			},
			{
			  address: '/accessories',
			  optionImage: 'IMAGE_URL',
			  optionTitle: 'Accessories'
			}
		  ]
	},
	{
		title: 'Support',
		url: `${addressUrl}showme`,
		parentClass: 'li_support',
		childClass: 'nav_support'
	},
	{
		title: 'Insider',
		hoverTitle: 'Insider Blog', // If you want to show different value on anchor hover
		url: `${addressUrl}blog`,
		parentClass: 'li_blog',
		childClass: 'nav_blog'
	},
];

menuArray is the set of menus, that you want to show in header. If you want to pass your menu array then create something like this.

Use to pass Props (For Shop domain)

cartCount {number}

Pass cartCount value if you want to show total of products in the cart

selectedVariant {object}

This object will hold the value of selected variant that will be reflected in floating cart

handleCartState {func}

Function that will update the state of cart

isCartOpen {bool}

isCartOpen will contain the value for current state of cartStates

handleReviews {func}

handleReviews function will scroll the page where productReviews started

Footer:

history {react-router-dom's history instance}

Pass react-router-dom's history instance, this is required for navigation

socialHandlers {object}

Social handlers object is optional, if user will not pass this prop, in that situation we're showing default handlers.

menus {menuArray} (Optional)

User will pass menuArray, if we want to show menu in footer

copyrightLinks {array} (Optional)

Pass array of copyright menus, this is optional