1.0.3 • Published 6 years ago

escalade-react-stock v1.0.3

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

Escalade Sports React Stock Component

A react component to display Escalade Sports stock.

Installation

With Yarn:

yarn add escalade-react-stock

Or npm:

npm install --save escalade-react-stock

Basic Usage

To only display content if a product is in stock:

import { Available } from 'escalade-react-stock'

...

<Available id='AT86A06455R' site='bear'>
	<button>Add to Cart</button>
</Available>

Prefetch Stock

To prefetch stock for all or some products, you can either use the function directly (recommended) or use the component. Just pass in the IDs as well as any other options you would supply for the Available component.

Do this with all IDs on the site to make ensure there's no load times on any <Available> components.

Function

import { prefetchStock } from 'escalade-react-stock'

...

componentWillMount(){
	prefetchStock({
		site: 'bear',
		ids: [
			'AT86A06455R',
			'AK1450SR',
			'AFT2032140',
		]
	})
}

Component

import { PrefetchStock } from 'escalade-react-stock'

...

<PrefetchStock
	site='bear'
	ids={[
		'AT86A06455R',
		'AK1450SR',
		'AFT2032140',
	]}
	/>

Additional Properties

PropertyDescriptionTypeDefault
idThe ID to show pricing from (if using Price component)Stringundefined
idsA list of IDs to prefetch pricingArrayundefined
siteThe site ID to pull pricing fromStringprocess.env.SITE_ID || process.env.GATSBY_SITE_ID
unavailableDisplay property if stock is unavailableString or Component'Out of Stock'
loadingDisplay property while stock is loadingString or Component''
cookiesSaves fetched pricing to a cookie for quicker loadingBooleantrue
cookieExpirationNumber of days until cookie expirtesNumber1
pollIntervalLength of time in milliseconds until all product pricing is fetched againNumber900000 (15 minutes)
endpointA URL or stage to fetch prices fromStringprocess.env.STOCK_ENDPOINT || process.env.GATSBY_STOCK_ENDPOINT || 'production'