Sizebay - Virtual Fitting Room (React)

About

This is a React library that allows you to use Sizebay's Virtual Fitting Room in your React application. It is a wrapper for the Sizebay's Virtual Fitting Room that allows you to use it in your React application.

If you're not familiar with Sizebay's Virtual Fitting Room, you can read more about it here.

Requirements

Project requirements

• React >= 16.8.0
• React DOM >= 16.8.0

Usage requirements

• You'll neeed a Sizebay tenant id, that is given to you by Sizebay, and serves as an identifier for your e-commerce. If you don't have one or don't know what it is, please contact us at Sizebay Support.

Installation

To install the library, run the following command:

# We recommend using yarn, but you can use npm as well
- yarn add @sizebay/react

Usage

To use the library, you need to import the SizebayProvider component and wrap your application with it. This you enable the library tools to be used in your application.

This is what a basic implementation looks like:

import React from 'react'
import { useSizebay, Button, Recommendation, SizebayModal, SizebayProvider } from '@sizebay/react'

// First you need to wrap your application with the SizebayProvider
const AppContainer = () => {
  return (
    <SizebayProvider>
      <App />
    </SizebayProvider>
  )
}

// Then you can use the Sizebay tools in your application as you wish
const App = () => {
  const { isReady, openVirtualFittingRoom, openSizeChart } = useSizebay({
    tenantId: YOUR_TENANT_ID_HERE,
    async permalink() {
      return 'SOME_PERMALINK_HERE'
    },
  })

  const handleVfr = () => {
    openVirtualFittingRoom()
  }

  const handleSizeChart = () => {
    openSizeChart()
  }

  if (!isReady) return <span>Loading...</span>

  return (
    <div>
      <div style={{ display: 'inline-flex', gap: 8, width: '100%' }}>
        <Button onClick={handleVfr}>Virtual Fitting Room</Button>
        <Button onClick={handleSizeChart}>Size Chart</Button>
      </div>

      <Recommendation>
        {({ profileName, recommendedSize }) => (
          <div style={{ display: 'inline-flex', gap: 8, width: '100%' }}>
            <span>
              We recommened {recommendedSize} to {profileName}
            </span>
          </div>
        )}
      </Recommendation>

      <SizebayModal />
    </div>
  )
}

API

Every prop from the API can and must be consumed through the useTour hook.

This section will take in consideration all the available props from useSizebay:

const { isReady, openVirtualFittingRoom, openSizeChart } = useSizebay({
  tenantId: YOUR_TENANT_ID_HERE,
  async permalink() {
    return 'SOME_PERMALINK_HERE'
  },
})

isReady: boolean

A flag that indicates if Sizebay is ready to be interacted with. This can help preventing errors when rendering our components before they're ready.

openVirtualFittingRoom: () => void

Opens the Virtual Fitting Room, using the tenant id and permalink provided in the useSizebay hook.

openSizeChart: () => void

Opens the Size Chart, using the tenant id provided in the useSizebay hook.

hookObject.tenantId: string

The tenant id provided by Sizebay. It is used to identify your e-commerce.

hookObject.permalink: () => Promise<string>

A function that returns a promise with the permalink of the product that you want to open in the Virtual Fitting Room. It is used to identify the product that you want to open.

SizebayProvider

A React component that wraps your application and enables the use of the Sizebay tools. It must be used in the root of your application so the whole context can be used.

Example

import React from 'react'

import { SizebayProvider } from '@sizebay/react'

const App = () => {
  return (
    <SizebayProvider>
      <YourApp />
    </SizebayProvider>
  )
}

Button

A React component that renders a headless button that can be used to open the Virtual Fitting Room or the Size Chart.

Example

import React from 'react'

import { Button } from '@sizebay/react'

const App = () => {
  return (
    <div>
      <Button onClick={() => {}}>Virtual Fitting Room</Button>
      <Button onClick={() => {}}>Size Chart</Button>
    </div>
  )
}

Recommendation

A React component that renders a headless component that can be used to show the recommended size for the user. It receives a function as a child that will be called with the recommended size and the profile name.

Example

import React from 'react'

import { Recommendation } from '@sizebay/react'

const App = () => {
  return (
    <div>
      <Recommendation>
        {({ profileName, recommendedSize }) => (
          <div>
            We recommend {recommendedSize} to {profileName}
          </div>
        )}
      </Recommendation>
    </div>
  )
}

SizebayModal

The modal of the Virtual Fitting Room. It is a React component that renders a headless component that can be used to show the Virtual Fitting Room. It has a built-in style that can be overriden by passing a style prop (not-recommended).

Example

import React from 'react'

import { SizebayModal } from '@sizebay/react'

const App = () => {
  return (
    <div>
      <SizebayModal />
    </div>
  )
}

Future

• [ ] Add support for customizing the Virtual Fitting Room's modal style
• [ ] Port prescript features to the React library

Questions?

• Sizebay Support: https://sizebay.com/en/contact-us/
• Luiz Nickel (Head of Engineering, Principal Engineer @ Sizebay)[mailto:[email protected]]