@wannaby/wanna-ui - npm Package Compare versions

@@ -1,470 +0,337 @@

# WANNA UI

# WANNA 3D Viewer for Handbags: Getting Started

WANNA’s 3D Viewer for handbags was specifically crafted to answer the industry’s pain point — the high number of returns due to the wrong size of the bag. It provides users with a novel experience to understand the size and capacity of a bag and enables brands to showcase the product with the utmost realism. Such an experience is designed to help clients make an informed shopping decision by exploring the product's size, dimensions, texture, and key attributes before purchase.

WANNA provides easy-to-customize pre-built UI for different 3D experiences. The set of available experiences depends on the product category:

The WANNA 3D Viewer is delivered as a React component to be used together with the WANNA SDK for Web, which provides the core experiences. The 3D Viewer has an easy-to-customize UI that could be easily integrated into a webpage.

- footwear - virtual try-on

- watches - virtual try-on

- handbags - 3D Viewer

This document provides a detailed description of the 3D Viewer installation and usage.

This UI is delivered as React component to be used together with the WANNA SDK for Web, which provides the core experiences.

- [System Requirements](#system-requirements)

- [License](#license)

- [Installation and Usage](#installation-and-usage)

- [Simple Installation](#simple-installation)

- [Import and Launch](#import-and-launch)

- [Example](#example)

- [Extended Installation](#extended-installation)

- [Component Props](#component-props)

- [Models Prop](#models-prop)

- [Header Component](#header-component)

- [Loading Component](#loading-component)

- [FooterLeft and FooterRight Components](#footerleft-and-footerright-components)

- [Labels](#labels)

- [3D Viewer Launch Example](#3d-viewer-launch-example)

- [Package.json](#packagejson)

- [App.js](#appjs)

## Install

## System Requirements

Supported environments:

* iOS:

* Safari 14 and later

* Google Chrome on iOS 14.3 and later

* In-app browsers for the most common messengers: WhatsApp, Facebook, Telegram, Snapchat, and Instagram

* Android:

* Google Chrome 88 and later

* In-app browsers for the most common messengers: WhatsApp, Facebook, Telegram, and Instagram

* Desktop:

* Google Chrome (latest version)

* Safari (latest version)

* Mozilla Firefox (latest version)

* Edge (latest version)

1. Install wanna-sdk library

## License

2. Install wanna-ui library (this library)

To work with WANNA SDK you need a license key. Contact our sales representative at account@wanna.fashion to get one.

3. Add the following rules into your Webpack file:

## Installation and Usage

```js

module: {

rules: [

{

test: /wanna-sdk\/.*iframe.html$/,

loader: 'file-loader',

},

{

test: /wanna-sdk\/.*core.js$/,

loader: 'file-loader',

options: {

},

...

],

}

```

### Simple Installation

To install the WANNA 3D Viewer, add both `@wannaby/wanna-ui` and `@wannaby/wanna-sdk` to your project dependencies:

If instead of Webpack you use Rollup JS, or something similar, you have to add some rules like that to add core.js and iframe.html files into your public folder and get iframe.html path to import it in the example below.

`yarn add @wannaby/wanna-ui @wannaby/wanna-sdk`

4. Make sure that your babel.config has modules: 'umd', field in settings (not necessary but may trigger some problems)

### Import and Launch

1. Import the WANNA UI component and it's styles from wanna-ui. **Note**: In this guide, the `WannaUI` name is used to refer to this component.

2. Import WANNA SDK to your project from wanna-sdk library.

3. Launch the 3D viewer by calling the component and passing the following parameters:

* `license` - Your license key received from the WANNA team.

* `mode` - This parameter is reserved for future use. In this version, only `wannaSdk.MODE_TYPE_3D` works.

* `modelsType` - This parameter is reserved for future use. In this version, only `wannaSdk.MODEL_TYPE_BAG` works.

* `models` - The models list. Only one model can be passed to the component. If you specify several models in an array, only the first one is shown in the 3D Viewer. You can find below the detailed description of available props.

#### Example

```

import wannaSDK from '@wannaby/wanna-sdk';

import WannaUI, { VIEW_MODE_MOBILE } from '@wannaby/wanna-ui';

import '@wannaby/wanna-ui/styles.css';

## Try out WANNA UI component

<WannaUI

wannaSdk={wannaSDK}

models={[

{

id: 'model_id',

brand: 'Brand Name',

price: '$ 1,200',

pois: [

'',

'Text that will be displayed for the 2nd POI',

'Text that will be displayed for the 3rd POI',

],

},

]}

license="your_license_key"

mode={wannaSDK.MODE_TYPE_3D}

modelsType={wannaSDK.MODEL_TYPE_BAG}

/>

```

1. Import WANNA SDK to your project from wanna-sdk library

2. Import the iframe from wanna-sdk/iframe

3. Import wanna-sdk/core

4. Import the WannaUI component from wanna-ui. Below in this guide, the WannaUI name is used to refer to this component.

5. Import the component styles import 'wanna-ui/lib/styles.css'

6. Launch the component and pass the required parameters.

Important! The sets of parameters for Virtual try-on and 3D modes are different. See the descriptions below.

### Extended Installation

By default, `wanna-ui` uses an iframe hosted by WANNA, but you can override it by including an iframe in your build and host it yourself.

Example:

```js

import wannaSdk from 'wanna-sdk'

import wannaSdkIframe from 'wanna-sdk/iframe'

import WannaUI from 'wanna-ui'

import 'wanna-ui/lib/styles.css'

import 'wanna-sdk/core'

const WrapperComponent = ({ models, license }) => (

<WannaUI

wannaSdk={wannaSdk}

iframeSrc={wannaSdkIframe}

models={models}

license={license}

/>

);

Add the following rules into your Webpack configuration:

```

### AR mode

For some categories, WANNA provides pre-built UI for virtual try-on.

To launch the UI you should run the component in AR mode using the mode={wannaSdk.MODE_TYPE_AR} prop. When launching the component requests camera access and then shows the video stream.

#### Notes:

Props footerLeftComponent, footerRightComponent aren't supported in the AR mode. The rest props from the Props list below are supported.

The models' list (models prop) supports only the following fields:

```js

[

rules: [

...

{

id: '<string>', // required. Loads model by id

image: <IMAGE>, // optional. Is displayed on the loading screen and in the model picker

brand: '<string>', // optional. Is displayed in the header

purchaseUrl: '<link for buy button>', // optional. A link for the Buy now button

test: /@wannaby\/wanna-sdk\/.*iframe.html$/,

loader: 'file-loader',

},

...

{

test: /@wannaby\/wanna-sdk\/.*core.js$/,

loader: 'file-loader',

options: {

},

]

```

#### Example:

If instead of Webpack you use Rollup JS, or something similar, you must add some rules like that to add core.js and iframe.html files into your public folder and get the iframe.html path to import it, as shown in the example below.

```js

const WrapperComponent = ({ models, license }) => (

<WannaUI

wannaSdk={wannaSdk}

iframeSrc={wannaSdkIframe}

license={license}

mode={wannaSdk.MODE_TYPE_AR}

modelsType={wannaSdk.MODEL_TYPE_SNEAKER}

theme={wannaSdk.THEME_DARK}

models={

[

{

id: 'wanna01',

image: <Image />,

brand: 'WANNA Design',

purchaseUrl: 'https://wanna.fashion/',

},

{

id: 'wanna02',

image: <Image />,

brand: 'WANNA Design',

},

]

}

/>

);

Import iframe.html and core in your application and pass the `iframeSrc` prop to the Wanna UI component:

```

### 3D mode

For some categories, WANNA provides the 3D Viewer.

To launch the UI you should run the component in 3D mode using the mode={wannaSdk.MODE_TYPE_3D} prop. In comparison with the AR mode, the component will launch immediately without requesting camera access.

#### Installation

First, add both `@wannaby/wanna-ui` and `@wannaby/wanna-sdk` to your project dependencies:

```

yarn add @wannaby/wanna-ui @wannaby/wanna-sdk

```

Then import component and SDK and use them in your application:

```

import wannaSDK from '@wannaby/wanna-sdk';

import WannaUI from '@wannaby/wanna-ui';

import WannaSDK from '@wannaby/wanna-sdk';

import wannaSdkIframe from '@wannaby/wanna-sdk/iframe.html';

import '@wannaby/wanna-sdk/core';

import '@wannaby/wanna-ui/styles.css';

const WrapperComponent = ({ license }) => (

<WannaUI

license={license}

mode={wannaSDK.MODE_TYPE_3D}

modelsType={wannaSDK.MODEL_TYPE_BAG}

models={

[

{

id: 'bag_model_id',

brand: 'Brand Name',

price: '$ 1,200',

pois: [

'',

'Here you can put the text that will be displayed for the 2nd POI',

'Here you can put the text that will be displayed for the 3nd POI',

],

},

]

}

/>

);

<WannaUI

wannaSdk={wannaSDK}

iframeSrc={wannaSdkIframe}

models={[

{

id: 'model_id',

brand: 'Brand Name',

price: '$ 1,200',

pois: [

'',

'Text that will be displayed for the 2nd POI',

'Text that will be displayed for the 3nd POI',

],

},

]}

license="your_license_key"

mode={wannaSDK.MODE_TYPE_3D}

modelsType={wannaSDK.MODEL_TYPE_BAG}

/>

```

#### Notes

## Component Props

The following props are supported in the WannaUI component:

In this version, the 3D mode works only for bag models: `modelsType={wannaSDK.MODEL_TYPE_BAG}`. Also, you need to pass `mode={wannaSDK.MODE_TYPE_3D}`

| Prop Name | Type | Description |

|-------------------------|----------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------|

| wannaSdk | String | SDK instance from `@wannaby/wanna-sdk` **(required)** |

| license | String | License key to use the SDK and component **(required)** |

| models | Array | Model list as described in “Models Prop” below **(required)** |

| mainColor | String | Custom color for loading indicator and the model picker in RGB (example: #1E1E1E); default color depend on the UI theme |

| logoURL | String | URL referencing a custom logo image; if specified, is displayed on the loading screen |

| brandImageURL | String | URL referencing a brand logo image; if specified, is displayed as the brand name instead of the brand text |

| modelsType | `wannaSDK.MODEL_TYPE_BAG` | Currently supports only `wannaSDK.MODEL_TYPE_BAG` to work with handbags |

| mode | `wannaSDK.MODE_TYPE_3D` | Currently supports only `wannaSDK.MODE_TYPE_3D` to work with the 3D Viewer |

| headerComponent | React.Component | Custom header component; see “Header Component” below |

| footerLeftComponent | React.Component | Custom footer left component; see “FooterLeft and FooterRight Components” below |

| footerRightComponent | React.Component | Custom footer right component; see “FooterLeft and FooterRight Components” below |

| loadingComponent | React.Component | Custom loading component, see “Loading Component” below |

| font | Object | Custom font for the interface, expressed as { file: string, family: string}; by default, Roboto Google font is used |

| showOnboarding | Boolean | Indicates whether onboarding should be shown to user or not (default: false) |

| labels | Object | Localization object; see “Labels” below |

| onError | (error) => void | Callback that is called when an error occurs |

| onModelLoadingFail | (modelId) => void | Callback that is called when the model loading fails. |

| onModelLoadingSuccess | (modelId) => void | Callback that is called when the model loading succeeds |

| onModelLoading | (modelId) => void | Callback that is called when model loading starts |

| onHeaderBackClick | () => void | Callback that is called when the user clicks the Back button in the header |

| onModel3dPoiChanged | ({ poi, modelId }) => void | Callback that is called when the user clicks on POI and it has been changed |

| onModel3dShowReferences | ({ modelId }) => void | Callback that is called when the user clicks on Dimensions and it has been displayed; |

Only one model could be passed to the component. If you specify several models in the array, only the first one would be shown in the 3D Viewer. All props are supported.

### Models Prop

The model list (`models` prop) supports the following fields:

The models' list (models prop) supports the following fields:

| Field Name | Type | Description |

|------------|-------------------------|-----------------------------------------------------------|

| id | String | Model ID **(required)** |

| image | String | URL to image that will be displayed in the loading screen |

| brand | String | Model brand name to be displayed in the header |

| name | String | Name that will be displayed in the header |

| price | String | Price that will be displayed in the header |

```js

[

{

id: '<string>', // required

image: <IMAGE>, // optional. Is displayed on the loading screen

price: '<string>', // optional. Is displayed in the header

pois: [<string>|<null>, ...], // optional. Used in model POIs list in order of dots in model

},

...

]

```

Note: For the `pois` field, a maximum of three values can be specified. Any additional values are ignored.

## Component props

### Header Component

WANNA provides full flexibility to customize the provided UI. You can use your own custom Header component by passing it as render-prop in the `headerComponent` prop. This component is used in the Wanna UI component and the Error screen.

The following Props are supported in the WannaUI component.

`headerComponent` will receive the following props:

```js

propTypes = {

// REQUIRED: --------------------------

// sdk instance from 'wanna-sdk'

wannaSdk: PropTypes.object.isRequired,

| Prop Name | Type | Description |

|---------------|-----------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|

| appWasInit | Boolean | Indicator that the app is ready; false in the Error and Rotate screens, true only in the Wanna UI component when the app was successfully initialized |

| brand | String | Model brand name |

| name | String | Model name |

| brandImageUrl | String | URL referencing the brand image |

| modelID | String | Model ID |

| style | Object | Style object |

| mode | `wannaSDK.MODE_TYPE_3D` | Mode of SDK initialization; currently can be only `wannaSDK.MODE_TYPE_3D` |

// your license to use the sdk

license: PropTypes.string.isRequired,

### Loading Component

To match your website better, you can use your own custom Loading component by passing it as render-prop in the `loadingComponent` property. This component will be used in the Main component during the initialization and a model loading.

// list of your models

models: PropTypes.arrayOf(

PropTypes.shape({

brand: PropTypes.string,

id: PropTypes.string,

image: PropTypes.string,

purchaseUrl: PropTypes.string,

})

).isRequired,

`loadingComponent` will receive the following props:

// src to imported wanna-sdk iframe

iframeSrc: PropTypes.string.isRequired,

| Prop Name | Type | Description |

|--------------|-----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|

| children | React.Node | Text label |

| progress | Number | Number from 0 to 100 inclusive, indicating the progress of the model’s loading |

| image | URL | Image to be shown with the loading indicator |

| loadingColor | String | Color of loading indicator in hex RGB (example: #1E1E1E) |

| modelsType | `wannaSDK.MODEL_TYPE_BAG` | Model type to work with; currently can be only `wannaSDK.MODEL_TYPE_BAG` |

| mode | `wannaSDK.MODE_TYPE_3D` | Mode of SDK initialization; currently can be only `wannaSDK.MODE_TYPE_3D` |

| type | `LOADING_TYPE_INIT` | `LOADING_TYPE_MODEL` | `LOADING_TYPE_MODE_CHANGE` | Loading type; useful if you need to distinguish the loading screen for the SDK initialization and model loading, exported from `@wannaby/wanna-ui` |

### FooterLeft and FooterRight Components

You can fully customize the footer by using your own custom footer components and passing them as render-prop in the `footerRightComponent` and `footerLeftComponent` properties. These components are used in the Main component footer when the component is initializing and a model is loading.

// OPTIONAL: -------------------------

// UI theme. By default the light theme is used.

theme: PropTypes.oneOf(['dark', 'light']),

`footerRightComponent` and `footerLeftComponent` support the following props:

// custom color for loading indicator and the models' picker. By default the cusyom color depends on the UI theme

mainColor: PropTypes.string,

| Prop Name | Type | Description |

|---------------------|-----------------------------------------------|-------------------------------------------------------------------|

| screenInteraction | Boolean | Indicator that the user has touched the screen; valid for 3D mode |

| on3dZoomOut | () => void | Zoom out (“minus” button) handler (for desktop mode) |

| on3dZoomIn | () => void | Zoom in (“plus” button) handler (for desktop mode) |

| onToggleReferences | () => void | Size reference toggle handler |

| model | Object | Current selected model object from the models list |

| activeShowReference | Boolean | Indicates whether the reference mode is on (true) or off (false) |

| onboardingIsRunning | Boolean | Indicates whether onboarding is in progress |

// URL to a custom logo image. If specified it will be displayed on the loading screen

logoUrl: PropTypes.string,

## Labels

All texts visible in the 3D Viewer UI are available as labels. You can pass your own values for these labels to edit them or localize to your specific local languages.

You can find the default label values in the table below.

// URL to a custom watermark image. The watermark is displayed on the virtual try-on photos. By default the WANNA watermark is used

watermarkUrl: PropTypes.string,

| Label | Default Value |

|-----------------------------|-------------------------------------------------------------------------------------------------------------|

| buyNow | Buy now |

| cameraAccessRequired | Camera access is required for virtual try-on. |

| canHold | Can hold |

| cantDownloadModel | Can't download the model. |

| cantSharePhoto | Can't share a photo. |

| cantTakePhoto | Can't take a photo. |

| cantToggleDimensions | Can't toggle model dimensions. |

| cantZoomInTheModel | Can't zoom in the model. |

| cantZoomOutTheModel | Can't zoom out the model. |

| cantResetTheModel | Can't reset the model. |

| cantChangeTheModelViewpoint | Can't change the model viewpoint. |

| copyLink | Copy link |

| copied | Copied |

| copyFailure | Can't copy, do it manually. |

| doubleClickToFocus | Double click to select focus point. |

| doubleTapToFocus | Double tap to select focus point. |

| feet | feet |

| forPhoto | for photo |

| hand | hand |

| generating | Generating |

| initializingApp | Initializing App... |

| modeChanging | Changing mode… |

| noImage | No image |

| noCameraDefault | Check Camera permissions for your app in Settings. Then return to this page and tap Reload. |

| noCameraWeChat | Check Settings > WeChat > Camera and turn on the camera toggle. Then return to this page and tap Reload. |

| noCameraFacebook | Check Settings > Facebook > Camera and turn on the camera toggle. Then return to this page and tap Reload. |

| noCameraInstagram | Check Settings > Instagram > Camera and turn on the camera toggle. Then return to this page and tap Reload. |

| noCameraChrome | Check Settings > Chrome > Camera and turn on the camera toggle. Then return to this page and tap Reload. |

| noCameraSafari | Check Settings > Safari > Camera and select Ask or Allow. Then return to this page and tap Reload. |

| loadingModel | Loading model… |

| pinchToZoom | Pinch to zoom. |

| pointTheCamera | Point the camera at your |

| pleaseComeBackLate | Please come back later. |

| reload | Reload |

| rotateThePhoneToTryOn | Rotate the phone to try on. |

| rotateThePhoneFor3d | Rotate the phone to view in 3D. |

| save | Save |

| scanQrcode | Scan the QR code to try on. |

| share | Share |

| sharingPhotoError | Can't share a photo. |

| somethingWentWrong | Something went wrong, but we’re working on it. |

| starting3dViewer | Starting 3D Viewer… |

| tap | Tap |

| toTryOnUs | To try on use Safari on iOS or Chrome on Android. |

| useSafariOrChrome | Use Safari on iOS or Chrome on Android. |

| useWiFiToTryOn | Use a Wi-Fi network to start try-on faster. |

| useWiFi | Use a Wi-Fi network to start faster. |

// URL to a brand logo. If specified it will be displayed as the brand name instead of brand text

brandImageUrl: PropTypes.string,

## 3D Viewer Launch Example

// model type to work with. By default 'sneakers' is used

modelsType: PropTypes.oneOf(['sneakers', 'watch', 'bag']),

// custom header component, check details and props below

headerComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

// custom footer left component, check details and props below

footerLeftComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

// custom footer right component, check details and props below

footerRightComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

// custom loading component, check details and props below

loadingComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

// on error callback, gets { error } object in params

onError: PropTypes.func,

// other optional callbacks

onCameraAccessRequested: PropTypes.func,

onCheckCameraPermissionsSuccess: PropTypes.func,

onCheckCameraPermissionsFail: PropTypes.func,

onFreezeOnCameraChange: PropTypes.func,

onPhotoSaved: PropTypes.func,

onPhotoShared: PropTypes.func,

onModelLoadingFail: PropTypes.func,

onModelLoadingSuccess: PropTypes.func,

onModelLoading: PropTypes.func,

onPhotoTaken: PropTypes.func,

onTryOn: PropTypes.func,

onHeaderBackClick: PropTypes.func,

onModel3dPoiChanged: PropTypes.func,

onModel3dResetView: PropTypes.func,

onModel3dShowReferences: PropTypes.func,

// custom font for the interface. By default Roboto Google font is used

font: PropTypes.shape({

file: PropTypes.string.isRequired,

family: PropTypes.string.isRequired,

}),

// mode of sdk initialization. By default, 'ar' is used

mode: PropTypes.oneOf(['ar', '3d']),

// view mode for the component. By default, 'mobile' is used

viewMode: PropTypes.oneOf(['mobile', 'desktop']).isRequired,

// 3d mode dimensions units for a model. By default, 'cm' is used

dimensionsUnit: PropTypes.oneOf(['cm', 'inch']),

// flag indicates whether onboarding should be shown to a user or not. By default, 'false' is used

showOnboarding: PropTypes.bool,

// localization object, check details below

labels: PropTypes.object,

}

### Package.json

```

## Header component

WANNA gives you the full flexibility to customize the provided UI. You can use your own custom Header component passing it as render-prop in headerComponent prop. This component will be used in the WannaUI component, the Error screen, and the Rotate screen.

The Header component will get the following props:

```js

propTypes = {

// flag indicates that the app is ready. False in Error and Rotate screen, true only in the WannaUI component when app was initialized successfully. By default, 'false'

appWasInit: PropTypes.bool,

// flag indicates whether the user touches the screen. Is valid for the 3D mode.

screenInteraction: PropTypes.bool,

// title located on the top in the center (model brand in the demo)

brand: PropTypes.string,

// subtitle located below the title in the center (model name in the demo)

// link to the brandImageUrl. If it is specified, the brand logo is displayed insted of the text in the title (brand)

brandImageUrl: PropTypes.string,

// model id

modelId: PropTypes.string,

// style object

style: PropTypes.object,

// mode of sdk initialization. By default, 'ar' is used

mode: PropTypes.oneOf(['ar', '3d']),

// view mode for the component. By default, 'mobile' is used

viewMode: PropTypes.oneOf(['mobile', 'desktop']).isRequired,

// handler for left back button, it gets `onHeaderBackClick` prop

onBack: PropTypes.func,

...rest - selected model params list. Gets from models list.

}

"wannaby/wanna-sdk": <version>,

"wannaby/wanna-ui": <version>

```

## Loading component

To match your website better, you can use your own custom Loading component passing it as render-prop in loadingComponent prop. This component will be used in the Main component during the initialization and a model loading.

The Loading component will get the following props:

```js

propTypes = {

// text labels

children: PropTypes.node,

// number showing the progress of model's loading. From 0 to 100

progress: PropTypes.number,

// image to be shown together with the loading indicator

image: PropTypes.node,

// loading color

loadingColor: PropTypes.string,

// UI theme

theme: PropTypes.oneOf([...THEME_TYPES]),

// model type to work with. By default, 'sneakers'

modelsType: PropTypes.string,

// mode of sdk initialization. By default, 'ar' is used

mode: PropTypes.oneOf(['ar', '3d']),

// loading type. It is useful if you need to distinguish the loading screen for the sdk initialization and model loading

type: PropTypes.oneOf([

LOADING_TYPE_INIT,

LOADING_TYPE_MODEL,

LOADING_TYPE_MODE_CHANGE,

]),

}

### App.js

```

import wannaSDK from '@wannaby/wanna-sdk';

import WannaUI, { VIEW_MODE_DESKTOP } from '@wannaby/wanna-ui';

import '@wannaby/wanna-ui/styles.css';

## FooterLeft & FooterRight Components

const models = [

{

id: 'model_id',

brand: 'Brand Name',

price: '$ 1,200',

pois: [

'',

'Text that will be displayed for the 2nd POI',

'Text that will be displayed for the 3rd POI',

],

},

];

You can fully customize the footer by using your own custom footer components and passing them as render-props in footerRightComponent, footerLeftComponent props. These components are used in the Main component footer when the component is initing and a model is loading.

const license = 'license_string';

The components will get the following props:

```js

propTypes = {

// text labels

viewMode: PropTypes.oneOf(['mobile', 'desktop']).isRequired,

// flag indicates whether the user touches the screen. Is valid for the 3D mode.

screenInteraction: PropTypes.bool,

// reset model handler, that will set default model position

on3dReset: PropTypes.func.isRequired,

// on minus button handler, that will zoom out the model when it's called

on3dZoomOut: PropTypes.func.isRequired,

// on plus button handler, that will zoom in the model when it's called

on3dZoomIn: PropTypes.func.isRequired,

// on size reference toggle handler. False if no references or no dimentions set for a model

onToggleRefenences: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),

// current selected model object from the 'models' list

model: PropTypes.object.isRequired,

// flag indicates if the size reference mode is on or off

activeShowReference: PropTypes.bool,

// flag indicates if onboarding is in progress. Should be used to disable all other UI elements for that time period

onboardingIsRunning: PropTypes.bool,

// flag indicates that model position wasn't changed and there is nothing to reset

resetDisabled: PropTypes.bool,

function App() {

return (

<div>

<PreviewModels

wannaSdk={wannaSDK}

models={models}

license={license}

mode={wannaSDK.MODE_TYPE_3D}

viewMode={VIEW_MODE_DESKTOP}

modelsType={wannaSDK.MODEL_TYPE_BAG}

theme={wannaSDK.THEME_LIGHT}

/>

</div>

);

}

```

## Labels default values

```json

{

"buyNow": "Buy now",

"cameraAccessRequired": "Camera access is required for virtual try-on",

"canHold": "Can hold",

"cantDownloadModel": "Can't download the model.",

"cantSharePhoto": "Can't share a photo.",

"cantTakePhoto": "Can't take a photo.",

"cantToggleDimensions": "Can't toggle model dimensions",

"cantZoomInTheModel": "Can't zoom in the model",

"cantZoomOutTheModel": "Can't zoom out the model",

"cantResetTheModel": "Can't reset the model",

"cantChangeTheModelViewpoint": "Can't change the model viewpoint",

"copyLink": "Copy link",

"copied": "Copied",

"copyFailure": "Can't copy, do it manually",

"doubleClickToFocus": "Double click to select focus point",

"doubleTapToFocus": "Double tap to select focus point",

"feet": "feet",

"forPhoto": "for photo",

"hand": "hand",

"generating": "Generating",

"initializingApp": "Initializing App...",

"noImage": "No image",

"noCameraDefault": "Check Camera permissions for you app in Settings. After that return to this page and press Reload Button.",

"noCameraWeChat": "Check Settings > WeChat > Camera and turn on the toggle. After that return to this page and press Reload Button.",

"noCameraFacebook": "Check Settings > Facebook > Camera and turn on the toggle. After that return to this page and press Reload Button.",

"noCameraInstagram": "Check Settings > Instagram > Camera and turn on the toggle. After that return to this page and press Reload Button.",

"noCameraChrome": "Check Settings > Chrome > Camera and turn on the toggle. After that return to this page and press Reload Button.",

"noCameraSafari": "Check Settings > Safari > Camera. And select ‘Ask’ or ‘Allow’. After that return to this page and press Reload Button.",

"loadingModel": "Loading model",

"pinchToZoom": "Pinch to zoom",

"pointTheCamera": "Point the camera at your",

"pleaseComeBackLater": "Please come back later",

"reload": "Reload",

"rotateThePhoneToTryOn": "Rotate the phone to try on",

"rotateThePhoneFor3d": "Rotate the phone to view in 3D",

"save": "Save",

"scanQrcode": "Scan QR-code to try on",

"share": "Share",

"sharingPhotoError": "Can't share a photo.",

"somethingWentWrong": "Something went wrong. But we’re working on it",

"starting3dViewer": "Starting 3D Viewer",

"tap": "Tap",

"toTryOnUse": "To try on use Safari on iOS and Chrome on Android",

"useSafariOrChrome": "Use Safari on iOS and Chrome on Android",

"useWiFiToTryOn": "Use a Wi-Fi network to start try-on faster",

"useWiFi": "Use a Wi-Fi network to start faster",

"modeChanging": "Changing mode"

}

export default App;

```

		{
		"name": "@wannaby/wanna-ui",
		"description": "Wanna WEB-AR Preview component",
		"version": "2.1.5",
		"version": "2.1.6",
		"main": "./index.js",
		@@ -6,0 +6,0 @@ "peerDependencies": {

@wannaby/wanna-ui - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics