ui_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 } from 'eargo-components'

Example

NavBar:

<NavBar history={history} />

Use to pass Props

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 = window.origin
const menuArray = [
	{
		title: 'Our Solutions',
		url: `${addressUrl}`,
		parentClass: 'li_solution',
		childClass: 'nav_solution',
		subMenuList: [
			{
				title: 'Hearing Aids',
				suburl: `${addressUrl}products-hearing-aids`,
			},
			{
				title: 'Eargo App',
				suburl: `${addressUrl}our-solutions/eargo-app`,
			},
		]
	},
	{
		title: 'Eargo Difference',
		url: `${addressUrl}`,
		parentClass: 'li_difference',
		childClass: 'nav_difference',
		subMenuList: [
			{
				title: 'How It Works',
				suburl: `${addressUrl}eargo-difference`,
			},
			{
				title: 'Compare Us',
				suburl: `${addressUrl}hearing-aid-comparison`,
			},
			{
				title: 'Reviews',
				suburl: `${addressUrl}reviews`,
			},
		]
	},
	{
		title: 'Shop',
		url: '/',
		parentClass: 'li_store',
		childClass: 'nav_store',
		subMenuList: [
			{
			  address: '/eargo-neo-hifi',
			  optionImage: 'IMAGE_URL',
			  titleImage: true,
			  optionTitle: 'https://eargo-images-prod.s3-us-west-1.amazonaws.com/Rebrand2019/EargoNEOHiFi_300x81-02.svg'
			},
			{
			  address: '/eargo-neo',
			  optionImage: 'IMAGE_URL',
			  titleImage: true,
			  optionTitle: 'https://eargo-images-prod.s3-us-west-1.amazonaws.com/Rebrand2019/neo.svg'
			},
			{
			  address: '/eargo-max',
			  optionImage: 'IMAGE_URL',
			  titleImage: true,
			  optionTitle: 'https://eargo-images-prod.s3-us-west-1.amazonaws.com/Rebrand2019/max.svg'
			},
			{
			  address: '/accessories',
			  optionImage: 'IMAGE_URL',
			  titleImage: false,
			  optionTitle: 'ACCESSORIES'
			}
		  ]
	},
	{
		title: 'Support',
		url: `${addressUrl}showme`,
		parentClass: 'li_support',
		childClass: 'nav_support'
	},
	{
		title: 'Hearing Health',
		url: `${addressUrl}`,
		parentClass: 'li_health',
		childClass: 'nav_health',
		subMenuList: [
			{
				title: 'Hearing Check',
				suburl: `${addressUrl}hearing-health/hearing-check`,
			},
			{
				title: 'Hearing Loss Causes',
				suburl: `${addressUrl}hearing-health/causes-of-hearing-loss`,
			},
			{
				title: 'Signs of Hearing Loss',
				suburl: `${addressUrl}hearing-health/signs-of-hearing-loss`,
			},
			{
				title: 'Treating Hearing Loss',
				suburl: `${addressUrl}hearing-health/treatment-of-hearing-loss`,
			},
			{
				title: 'Hearing Loss FAQ',
				suburl: `${addressUrl}hearing-health/faq`,
			},
		]
	},
	{
		title: 'Insider Blog',
		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

License

See the License file.