# **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**](https://aiframe.app) to obtain an **API Key** and **Auth Token**.
### **Step 1: Navigate to Developer Settings**
1. Sign in to [**aiframe.app**](https://aiframe.app).
2. Go to the **Dashboard**.
3. Click on the **Profile Avatar** (top-right corner).
4. 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:
```sh
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):
```tsx
"use client";
import { TryOnProvider } from "react-virtual-tryon";
import ProductPage from "./ProductPage";
function App() {
return (
);
}
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**
```tsx
import { TryOnButton } from "react-virtual-tryon";
const ProductPage = () => {
const product = {
id: "dress123",
image: "https://example.com/dress.jpg",
name: "Elegant Red Dress",
};
return (
{product.name}
Try On
);
};
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):
```tsx
import "react-virtual-tryon/dist/index.css";
```
### **Step 2: Use the Try-On Button**
Once imported, the component will have default styles applied.
```tsx
Try It On
```
✔ **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**
```css
/* 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:
```tsx
Try It On
```
### **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.