Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@acctglobal/product-container
Advanced tools
```bash yarn add @acctglobal/product-container npm install @acctglobal/product-container ```
Readme
yarn add @acctglobal/product-container
npm install @acctglobal/product-container
import { ProductContainer } from '@acctglobal/product-container'
TimedProductContainer is a product rendering component that receives a start and an end date to calculates the time from the current date to the end date to render products until the last second
import ProductContainer from "./components/TimedProductContainer/index";
<ProductContainer
timer={true}
productsData={productsData}
startDate={new Date("Year-Month-DayTHour:Minutes:Seconds")}
endDate={new Date("Year-Month-DayTHour:Minutes:Seconds")}
/>
Prop name | Type | Description |
---|---|---|
productsData | object | The data of the products tha will be used |
startDate | Date | The date that product container will start to render |
endDate | Date | The date that produc container will stop to render |
timer | boolean | If passed as false will render the product container without a timer |
starImg | string | Pass a image url to change star icon |
starAlt | string | Pass a string to change star image alt |
shelfCustomStyle | object | Accept styles to change product shelf |
offerCustomStyle | object | Accept styles to change offer style |
productImageStyle | object | Accept styles to change product image |
productNameStyle | object | Accept styles to change product name |
ratingContainerStyle | object | Accept styles to change rating container |
starRatingStyle | object | Accept styles to change rating stars |
oldPriceStyle | object | Accept styles to change old price |
priceStyle | object | Accept styles to change price |
installmentsStyle | object | Accept styles to change installments |
timerStyle | object | Accept styles to change timer |
Prop name | Type | Description |
---|---|---|
width | string | Change the width of product shelf |
margin | string | Change the margin of product shelf |
borderRadius | string | Change border radius of product shelf |
border | string | Change border of product shelf |
Prop name | Type | Description |
---|---|---|
backgroundColor | string | Change the background color of the offer |
fontSize | string | Change the font size os the offer |
fontWeight | string | Change the font weight os the offer |
borderRadius | string | Change border radius of the offer |
color | string | Change the color of the offer |
width | string | Change the width of the offer |
height | string | Change the height of the offer |
top | string | Position the offer from the top |
right | string | Position the offer from the right |
bottom | string | Position the offer from the bottom |
left | string | Position the offer from the left |
Prop name | Type | Description |
---|---|---|
width | string | Change the width of product image |
height | string | Change the margin of product image |
borderRadius | string | Change border radius of product image |
Prop name | Type | Description |
---|---|---|
fontSize | string | Change the font size of product name |
fontWeight | string | Change the font weight of product name |
Prop name | Type | Description |
---|---|---|
width | string | Change the width of rating container |
justifyContent | string | Change the justify method of rating container |
Prop name | Type | Description |
---|---|---|
width | string | Change the width of star rating |
height | string | Change the height of star rating |
margin | string | Change the margin of star rating |
Prop name | Type | Description |
---|---|---|
fontSize | string | Change the old price font size |
fontWeight | string | Change the old price font weight |
textDecoration | string | Change the old price text decoration |
margin | string | Change the old price margin |
Prop name | Type | Description |
---|---|---|
fontSize | string | Change the price font size |
fontWeight | string | Change the price font weight |
textDecoration | string | Change the price text decoration |
margin | string | Change the price margin |
Prop name | Type | Description |
---|---|---|
fontSize | string | Change the installments font size |
fontWeight | string | Change the installments font weight |
textDecoration | string | Change the installments text decoration |
margin | string | Change the installments margin |
FAQs
```bash yarn add @acctglobal/product-container npm install @acctglobal/product-container ```
The npm package @acctglobal/product-container receives a total of 3 weekly downloads. As such, @acctglobal/product-container popularity was classified as not popular.
We found that @acctglobal/product-container demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.