react-i18next#NamespacesConsumer JavaScript Examples
The following examples show how to use
react-i18next#NamespacesConsumer.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: hero.js From AzureEats-Website with MIT License | 6 votes |
|
render() {
return (
<NamespacesConsumer>
{t => (
<div className="hero">
<div className="hero__banner">
<div className="hero__inner">
<Freeshipping />
<span className="hero__text hero__text--strong">
{t("home.hero.shiping")}
</span>
<span className="hero__text">•</span>
<span className="hero__text hero__text--light">
{t("home.hero.orders")}
</span>
</div>
</div>
<div className="hero__image-wrapper">
<div className="hero__image" ref={this.bgImg} />
</div>
</div>
)}
</NamespacesConsumer>
);
}
Example #2
| Source File: checkboxContainer.js From AzureEats-Website with MIT License | 6 votes |
|
render() {
const { data, title } = this.props;
const dataType = this.props.id;
return (
<NamespacesConsumer>
{t => (
<div className="filter">
<legend className="filter__title">{title}</legend>
{data &&
data.map((item, key) => (
<div className="filter__item" key={key}>
<Checkbox
name={item.name}
checked={this.state.checkedItems.get(item.name)}
onChange={(e)=>{
this.handleChange(e, dataType)
}}
code={`${item.code || item.id}`}
/>
<label className="label" htmlFor={`${item.code || item.id}`}>
{item.name}
</label>
</div>
))}
<div className="filter__more">{t("list.aside.more")}</div>
</div>
)}
</NamespacesConsumer>
);
}
Example #3
| Source File: listAside.js From AzureEats-Website with MIT License | 6 votes |
|
render() {
const { typesList, brandsList } = this.props;
return (
<NamespacesConsumer>
{t => (
<aside className="list__aside">
<button className="btn btn--secondary btn--float" onClick={this.openFilterPanel}>
<FilterImg />
<span>{t("list.aside.filtersTitle")}</span>
</button>
{this.state.showComponent && (
<div className={ this.state.isopened ? "list__panel is-opened" : "list__panel" } ref={this.filterPanel}>
<CheckboxContainer
onFilterChecked={this.props.onFilterChecked}
data={typesList}
title="Cordless Power Tools"
id="type"
/>
<CheckboxContainer
onFilterChecked={this.props.onFilterChecked}
data={brandsList}
title="Brands"
id="brand"
/>
<button className="btn btn--primary" onClick={this.toggleClass}>
{t("list.aside.close")}
</button>
</div>
)}
</aside>
)}
</NamespacesConsumer>
);
}
Example #4
| Source File: shoppingCart.js From AzureEats-Website with MIT License | 6 votes |
|
render() {
const { shoppingCart, loading, isPulling } = this.state
return (
<NamespacesConsumer>
{t => (
<Fragment>
{loading && isPulling ? <LoadingSpinner /> : <Fragment>
<h2 className="shopping-card__title grid__heading">{t("shoppingCart.title")}</h2>
<div className="shopping-card__grid">
{shoppingCart && shoppingCart.map((shoppingCart, index) => (
<ShoppingCartCard {...shoppingCart} updateQty={this.updateQty} key={index} />
))}
</div>
</Fragment>}
</Fragment>
)}
</NamespacesConsumer>
);
}
Example #5
| Source File: suggestedProductsList.js From AzureEats-Website with MIT License | 6 votes |
|
render() {
const productsReceived = this.state.suggestedProductsList;
return (
<NamespacesConsumer>
{t => (
<Fragment>
<div className="banner">
<span className="banner__item">{t("shared.banner.disclaimer")}</span>
<div className="banner__item">
<span>{t("shared.banner.info")}</span>
</div>
<UploadFile title={t("shared.banner.uploadPhotoTitle")} />
</div>
<div className="suggestedproductslist">
{productsReceived && productsReceived.map((suggestedProductsListInfo, index) => (
<Card {...suggestedProductsListInfo} key={index} />
))}
</div>
</Fragment>
)}
</NamespacesConsumer>
);
}
Example #6
| Source File: loginComponent.js From AzureEats-Website with MIT License | 6 votes |
|
render() {
return (
<NamespacesConsumer>
{t => (
<div className={this.state.isModalOpened ? 'modal-overlay is-opened' : 'modal-overlay'}>
<Alert stack={{ limit: 1 }} />
<div className="modal">
<Close onClick={this.toggleModalClass} />
<Logo />
{this.state.useB2c
? <LoginB2c onLoginClick={this.handleLoginB2CClick} />
: <LoginForm
handleSubmit={this.handleSubmit}
keepInputEmail={this.keepInputEmail}
keepInputPassword={this.keepInputPassword}
/>
}
</div>
</div>
)}
</NamespacesConsumer>
);
}
Example #7
| Source File: detail.js From AzureEats-Website with MIT License | 5 votes |
|
render() {
const { name, price, imageUrl, stockUnits } = this.props.detailProductData;
const type = Object.assign({}, this.props.detailProductData.type);
const { features } = this.props.detailProductData;
const relatedDetailProducts = this.props.relatedDetailProducts;
const hasRelatedDetailProducts = relatedDetailProducts && relatedDetailProducts.length;
const bgImage = {
backgroundImage: `url(${imageUrl})`,
};
const { loadingRelated, loggedIn } = this.props;
return (
<NamespacesConsumer>
{t => (
<div className="detail">
<div className="detail__wrapper">
<div className="detail__image" style={bgImage} />
<div className="detail__info">
<p className="detail__label">{type.name}</p>
<div className="detail__data">
<span className="detail__title">{name} (${price})</span>
{stockUnits > 0 ?
<span className="detail__tag">{t("detail.inStock")}</span> :
<span className="detail__tag nostock">{t("detail.outStock")}</span>
}
<span className="detail__tag">{t("detail.tagName1")}</span>
<span className="detail__tag">{t("detail.tagName2")}</span>
</div>
{stockUnits > 0 && loggedIn && <div className="detail__buttons">
<button className={`btn btn--primary btn--cart`} onClick={this.addToCart}>{t("detail.addToCart")}</button>
<Link className="btn btn--secondary" to="/shopping-cart">{t("detail.shoppingCart")}</Link>
</div> }
<div className="detail__description">
<ul>
{features &&
features.map((feature, index) => (
<li className="detail__feature" key={index}>
<span className="detail__feature-title">{`${feature.title}:`}</span>
<span className="detail__feature-description">{feature.description}</span>
</li>
))}
</ul>
</div>
</div>
</div>
{loadingRelated ? <LoadingSpinner /> : null}
{hasRelatedDetailProducts ? <Popular relatedDetailProducts={relatedDetailProducts} /> : null}
</div>
)}
</NamespacesConsumer>
);
}
Example #8
| Source File: profileContainer.js From AzureEats-Website with MIT License | 5 votes |
|
render() {
const { coupons } = this.state
const { purchaseHistory, recommendedProducts, favoriteCatregories, profile } = this.state
const isSmallCouponsAvailable = coupons && coupons.smallCoupons.length;
return (
<NamespacesConsumer>
{t => (
<div className="profile">
<div className="grid-container">
<Profile {...profile} />
<aside className="aside">
<div className="profile__heading">
<h2 className="profile__heading-title">{t("profile.cupons.title")}</h2>
{isSmallCouponsAvailable ?
<Link className="btn btn--secondary" to="/coupons">
<span>{t("profile.cupons.seeAll")}</span>
</Link> : null}
</div>
{isSmallCouponsAvailable ? <SmallCoupons smallCoupons={coupons.smallCoupons} /> :
<div className="profile__data--empty">
<span className="profile__title profile__info">{t("profile.cupons.noCupons")}</span>
</div>}
</aside>
<div className="history">
<h2 className="profile__heading-title profile__heading-history">{t("profile.history.title")}</h2>
{purchaseHistory && purchaseHistory.map((purchaseHistoryItem, index) => (
<PurchaseHistory {...purchaseHistoryItem} key={index} />
))}
</div>
</div>
<h2 className="profile__heading-title profile__heading-recommended">{t("profile.recommended.title")}</h2>
<div className="cards">
{recommendedProducts && recommendedProducts.map((recommendedProducts, index) => (
<Card {...recommendedProducts} key={index} />
))}
</div>
<h2 className="profile__heading-title">{t("profile.favorite.title")}</h2>
<div className="favorite">
{favoriteCatregories && favoriteCatregories.map((favoriteCatregory, index) => (
<FavoriteCategories {...favoriteCatregory} key={index} />
))}
</div>
</div>
)}
</NamespacesConsumer>
);
}
Example #9
| Source File: header.js From AzureEats-Website with MIT License | 5 votes |
|
render() {
const { profile } = this.state;
const { loggedIn } = this.props.userInfo;
return (
<NamespacesConsumer>
{t => (
<header className="header">
<Link to="/">
<Logo />
</Link>
<nav className={this.state.isopened ? 'main-nav is-opened' : 'main-nav'}>
<Link className="main-nav__item" to="/list/mooncheese">
{t('shared.header.homeAppliances')}
</Link>
<Link className="main-nav__item" to="/list/brewdragon">
{t('shared.header.sink')}
</Link>
<Link className="main-nav__item" to="/list/meteorflower">
{t('shared.header.home')}
</Link>
<Link className="main-nav__item" to="/list/cometflakes">
{t('shared.header.gardening')}
</Link>
<Link className="main-nav__item" to="/list/localbubblegum">
{t('shared.header.decor')}
</Link>
<Link className="main-nav__item" to="/list/gazeuse">
{t('shared.header.kitchen')}
</Link>
<Link className="main-nav__item" to="/list/marsbars">
{t('shared.header.diytools')}
</Link>
<div className="main-nav__actions">
<Link className="main-nav__item" to="/profile">
{t('shared.header.profile')}
</Link>
<button className="u-empty main-nav__item">
{t('shared.header.logout')}
</button>
</div>
<button className="u-empty btn-close" onClick={this.toggleClass}>
<Close />
</button>
</nav>
<nav className="secondary-nav">
{/* <Search /> */}
{loggedIn && <Link to="/profile"><UserPortrait {...profile} /></Link>}
{loggedIn ? <div className="secondary-nav__login" onClick={this.onClickLogout}>{t('shared.header.logout')}</div>
: <div className="secondary-nav__login" onClick={this.toggleModalClass}>{t('shared.header.login')}</div>}
{loggedIn && <Link className="secondary-nav__cart" to="/shopping-cart">
<Cart />
<div className="secondary-nav__cart-number">
{this.props.quantity}
</div>
</Link>}
<button className="u-empty" onClick={this.toggleClass}>
<Hamburger />
</button>
</nav>
{this.state.ismodalopened ?
<Login UseB2C={this.state.UseB2C} toggleModalClass={this.state.ismodalopened} onClickClose={this.onClickClose} />
: null}
</header>
)}
</NamespacesConsumer>
);
}
Example #10
| Source File: header.js From DevOpsLabARM with MIT License | 5 votes |
|
render() {
const { profile } = this.state;
const { loggedIn } = this.props.userInfo;
return (
<NamespacesConsumer>
{t => (
<header className="header">
<Link to="/">
<Logo />
</Link>
<nav className={this.state.isopened ? 'main-nav is-opened' : 'main-nav'}>
<Link className="main-nav__item" to="/list/homeappliances">
{t('shared.header.homeAppliances')}
</Link>
<Link className="main-nav__item" to="/list/sink">
{t('shared.header.sink')}
</Link>
<Link className="main-nav__item" to="/list/home">
{t('shared.header.home')}
</Link>
<Link className="main-nav__item" to="/list/gardening">
{t('shared.header.gardening')}
</Link>
<Link className="main-nav__item" to="/list/decor">
{t('shared.header.decor')}
</Link>
<Link className="main-nav__item" to="/list/kitchen">
{t('shared.header.kitchen')}
</Link>
<Link className="main-nav__item" to="/list/diytools">
{t('shared.header.diytools')}
</Link>
<div className="main-nav__actions">
<Link className="main-nav__item" to="/profile">
{t('shared.header.profile')}
</Link>
<button className="u-empty main-nav__item">
{t('shared.header.logout')}
</button>
</div>
<button className="u-empty btn-close" onClick={this.toggleClass}>
<Close />
</button>
</nav>
<nav className="secondary-nav">
{/* <Search /> */}
{loggedIn && <Link to="/profile"><UserPortrait {...profile} /></Link>}
{loggedIn ? <div className="secondary-nav__login" onClick={this.onClickLogout}>{t('shared.header.logout')}</div>
: <div className="secondary-nav__login" onClick={this.toggleModalClass}>{t('shared.header.login')}</div>}
{loggedIn && <Link className="secondary-nav__cart" to="/shopping-cart">
<Cart />
<div className="secondary-nav__cart-number">
{this.props.quantity}
</div>
</Link>}
<button className="u-empty" onClick={this.toggleClass}>
<Hamburger />
</button>
</nav>
{this.state.ismodalopened ?
<Login UseB2C={this.state.UseB2C} toggleModalClass={this.state.ismodalopened} onClickClose={this.onClickClose} />
: null}
</header>
)}
</NamespacesConsumer>
);
}
