npm package: @richarepo/ui_components
Description: Eargo UI Components
Author: Richa Goel
Latest version: 0.1.4

# ui_components

[![npm version](https://img.shields.io/npm/v/@richarepo/ui_components.svg)](https://www.npmjs.com/package/@richarepo/ui_components)
[![downloads](https://img.shields.io/npm/dt/@richarepo/ui_components.svg)](https://www.npmjs.com/package/@richarepo/ui_components)
[![dependencies](https://david-dm.org/author_name/@richarepo/ui_components.svg)](https://david-dm.org/author_name/@richarepo/ui_components)
[![devDependencies](https://david-dm.org/author_name/@richarepo/ui_components/dev-status.svg)](https://david-dm.org/author_name/@richarepo/ui_components?type=dev)



Eargo UI Components

### Run package locally
```sh
npm install
npm link
```

To use in the project 
```sh
npm install eargo-components
npm link eargo_components
import { NavBar } from 'eargo-components'
```

To unlink package
```sh
npm unlink eargo_components
```
### To use package from publish version

```sh
npm install eargo-components
import { NavBar } from 'eargo-components'
```

### Example

#### NavBar:

```javascript
<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:-
```javascript

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](LICENSE) file.