Package Exports
- react_size_chart
- react_size_chart/dist/cjs/index.js
- react_size_chart/dist/esm/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react_size_chart) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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_chartGetting 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 |
Keywords
size chart guide recommender fitting vestofy maker
License
Feedback
If you have any feedback, please reach out to us at contact@vestofy.com