React_size_chart NPM

react_size_chart

Smart size chart by Vestofy for apparel, include size chart and size recommender. Please note: Size charts currently can be created only on 'Size Chart Maker | Vestofy' iOS/Mac app.

Features

Customizable 'Size guide' button
Popup dialog size guide
Size chart unit coversion (Metric, Imperial)
Size recommender with automatic body size prediction by age, height and weight.
Exact size match according to shoppers own garment dimension (Measured by Vestofy mobile app).

Installation

  npm install react_size_chart

Getting started

Download 'Size Chart Maker | Vestofy' app from iOS/Mac AppStore here.
Currently size charts creation a availible via iOS/Mac and Shopify only.
Follow the instruction on the app.
Click the '</>' button for Size chart/Product/Collection to retrieve required prop's.
Example code:

import {Vestofy} from 'react_size_chart';

/*Single size chart*/
<Vestofy shop={YOUR_SHOP_ID} size_chart_id={SIZE_CHART_ID}/>

/*Product size charts*/
<Vestofy shop={YOUR_SHOP_ID} product_id={PRODUCT_ID}/>

/*Collection of products size chart*/
<Vestofy shop={YOUR_SHOP_ID} collection_id={COLLECTION_ID}/>

API Reference

prop	Type	Default value
`shop (Required)`	`string`	Parameter from app
`size_chart_id`	`string`	Size chart identifier (mutually exclusive: product_id, collection_id)
`product_id`	`string`	Product identifier (mutually exclusive: size_chart_id, collection_id)
`collection_id`	`string`	Collection identifier (mutually exclusive: size_chart_id, product_id)
`locale`	`string`	en (default), ar, es, he, pt, ru, zh
`options`	`options`	see below

Options

prop	Type	Default value
`ButtonText`	`string`	'Fitting Room'
`ButtonTextSize`	`number`	15
`ButtonTextColor`	`string`	'#000000'
`ButtonBackgroundColor`	`string`	'#FF000000'
`DialogTitle`	`string`	'Size Guide'
`ButtonImgSrc`	`string`	meter_icon
`btnAlign`	`enum`	eAlignLeft
`border`	`object`	No border
`advice`	`boolean`	true
`adviceText`	`string`	'Find your best size'
`adviceBackgroundColor`	`string`	'#FAB823'
`dev`	`boolean`	false