react-virtual-tryon

Virtual Try-On React Component Library - Documentation

Introduction

The Virtual Try-On React Component Library enables developers to integrate AI-powered virtual try-on features into their web applications. This guide will walk you through the setup, registration, and usage of the library.

1. App Registration

Before using the Virtual Try-On components, you must register your application on aiframe.app to obtain an API Key and Auth Token.

Step 1: Navigate to Developer Settings

• Sign in to aiframe.app.
• Go to the Dashboard.
• Click on the Profile Avatar (top-right corner).
• Select Developer Settings from the dropdown.

Step 2: Open the Registration Page

You will be redirected to the Developer Settings page. Click on the "Register App" button to open a popover.

Step 3: Fill in App Details

In the popover, provide the following details:

• App Name: A unique name for your application.
• Origins URLs: The allowed origins (e.g., http://yourdomain.com or https://yourdomain.com).
  • Both HTTP and HTTPS protocols are supported.

Step 4: Submit Registration

Once the details are provided, click the "Register" button to complete the process.

Step 5: Receive API Key & Auth Token

Upon successful registration:

• An API Key will be generated to authenticate requests.
• An Auth Token will be issued for secure access to the Virtual Try-On API.
• Both credentials must be securely stored and included in API requests when using the library.

2. Setting Up the Try-On Provider

To use the Virtual Try-On components, wrap your application with the TryOnProvider, passing in your API Key and Auth Token.

Installation

First, install the package via npm or yarn:

npm install react-virtual-tryon
# or
yarn add react-virtual-tryon

Usage

Wrap your application with the TryOnProvider in your main component (e.g., App.tsx or layout.tsx for Next.js):

"use client";

import { TryOnProvider } from "react-virtual-tryon";
import ProductPage from "./ProductPage";

function App() {
  return (
    <TryOnProvider apiKey="your-api-key" token="your-auth-token">
      <ProductPage />
    </TryOnProvider>
  );
}

export default App;

How the Provider Works

• The TryOnProvider ensures that the API Key and Auth Token are available throughout the library.
• Users do not need to access these credentials directly.
• The library handles authentication and API communication internally.

3. Using the Try-On Button

Once the provider is set up, users can integrate the TryOnButton component into their product pages.

Props

Prop Name	Type	Required	Description
dressId	string	✅	The unique identifier for the dress.
dressImage	string	✅	URL of the dress image.
dressName	string	✅	Name of the dress.
className	string	❌ (optional)	Custom styling for the button.
children	any	❌ (optional)	Custom text inside the button (e.g., Try On).
widgetClasses	string	❌ (optional)	Custom styling for the Virtual Fitting Room modal.

Example Usage in a Product Page

import { TryOnButton } from "react-virtual-tryon";

const ProductPage = () => {
  const product = {
    id: "dress123",
    image: "https://example.com/dress.jpg",
    name: "Elegant Red Dress",
  };

  return (
    <div>
      <h1>{product.name}</h1>
      <img src={product.image} alt={product.name} />

      <TryOnButton
        dressId={product.id}
        dressImage={product.image}
        dressName={product.name}
        className="custom-button-style"
      >
        Try On
      </TryOnButton>
    </div>
  );
};

export default ProductPage;

How It Works

• When the "Try It On" button is clicked, a Virtual Fitting Room modal opens.
• The modal uses the API Key and Auth Token (handled internally).
• Users can try on the dress virtually using AI-powered rendering.
• The className prop allows developers to style the button to match their app theme.
• The children prop lets users customize the button text (e.g., "Try On").

4. Styling Guide

To ensure proper styling of the Virtual Try-On components, importing the library's CSS file is mandatory.

Step 1: Import the Default Stylesheet

Add the following import to your entry file (index.js, index.tsx, or layout.tsx in Next.js):

import "react-virtual-tryon/dist/index.css";

Step 2: Use the Try-On Button

Once imported, the component will have default styles applied.

<TryOnButton
  dressId="dress123"
  dressImage="https://example.com/dress.jpg"
  dressName="Elegant Red Dress"
>
  Try It On
</TryOnButton>

✔ Default styles will now be applied automatically.

Custom Styling

For projects that require additional customization, developers can override the default styles using their own CSS.

Example: Overriding Button Styles

/* styles.css */
.tryon-button {
  background-color: #ff5733;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.tryon-button:hover {
  background-color: #e04b2c;
}

Apply the styles using the className prop:

<TryOnButton className="tryon-button">Try It On</TryOnButton>

Summary of Styling Requirements

Requirement	Action
Import Required	The stylesheet must be imported: import "react-virtual-tryon/dist/index.css".
Custom Styling	Use className to apply additional styles as needed.

By following these guidelines, you can ensure seamless integration while maintaining design consistency.