react_size_chart/README.md

Vestfoy smart size charts react package

# 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.

![Logo](https://chart-outline-images.s3.us-east-2.amazonaws.com/create-size-chart.webp )

## 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

```bash
  npm install react_size_chart
```
    
## Getting started
1. Download **'Size Chart Maker | Vestofy'** app from iOS/Mac AppStore [here](https://apps.apple.com/us/app/size-chart-maker-vestofy/id1534281434).
2. Currently size charts creation a availible via iOS/Mac and Shopify only.
3. Follow the instruction on the app to retrieve relevent id's.
4. Click the **'</>'** button for Size chart/Product/Collection to retrieve required prop's.
5. Example code:
```
import {Vestofy} from 'react_size_chart'; // Size guide button
import {VestofySizeChartPopup} from 'react_size_chart'; // Size guide popup

/*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   | Description  | Default value                | 
| :-------- | :------- | :-------- | :------------------------- |
| `shop (Required)` | `string` | Store identifier | Parameter from app |
| `size_chart_id` | `string` | Selected size chart identifier | Size chart identifier (**mutually exclusive**: product_id, collection_id)|
| `product_id` | `string` | Product (size charts table list) size charts identifier | Product identifier (**mutually exclusive**: size_chart_id, collection_id) |
| `collection_id` | `string` | Collection of products identifier | Collection identifier (**mutually exclusive**: size_chart_id, product_id) |
| `locale` | `string` | Size guide popup language | en (default), ar, es, he, pt, ru, zh |
| `options` | `options` | Aditional options | see below


## Options
| prop | Type  | Description  | Default value                | 
| :-------- | :------- | :------------ | :------------------------- |
| `DialogTitle` | `string` | Title on size guide popup |'Size Guide' |
| `ButtonText` | `string` | Show size guide button text title |'Fitting Room'|
| `ButtonTextSize` | `number`| Show size guide button text size | 15 |
| `ButtonTextColor` | `string`| Show size guide button text color | '#000000' |
| `ButtonBackgroundColor` | `string` | Show size guide button background color. | '#FF000000' |
| `ButtonImgSrc` | `string` | Icon on show size guide button |meter_icon |
| `btnAlign` | `enum` | How to align show size guide button |eAlignLeft |
| `border` | `object` | Add border to show size guide button | No border |
| `advice` | `boolean` | Show size advice near on parent page |true |
| `adviceText` | `string` | Title near size advice |'Find your best size' | 
| `adviceBackgroundColor` | `string` | background color on dvice  |'#FAB823' |
| `dev` | `boolean` | force reload when developing (Slow! Not recomended in production web site) |false |

## Keywords
clothing apparel size chart guide recommender fitting vestofy maker


## License

[MIT](https://choosealicense.com/licenses/mit/)


## Feedback

For support or feedback, please reach out to us at contact@vestofy.com


## Supported by

[Vestofy](https://vestofy.com)