# <FitElement>

> The inline element (sign-in and "your body is ready" in your page).

Source: https://docs.tryyoursize.com/reference/react/fit-element/

*Component* · `@tryyoursize/react`

The inline element (sign-in and "your body is ready" in your page). Recommended.

Pass a `ref` to get an [`ElementHandle`](https://docs.tryyoursize.com/reference/react/element-handle.md) (`open()`, `close()`, `getRecommendation()`, `getElement()`).

```ts
FitElement: ForwardRefExoticComponent<ElementProps & RefAttributes<ElementHandle>>
```

## Props

- **`product`** (`string`, required): Your product identifier, as synced to TryYourSize. Changing it updates the element in place.
- **`id`** (`string`, optional)
- **`className`** (`string`, optional)
- **`style`** (`CSSProperties`, optional)
- **`onReady`** (`(e: ElementEvents["ready"]) => void`, optional): The element is shown and connected.
- **`onSize`** (`(e: SizeEvent) => void`, optional): The shopper got a size for this product: preselect the variant.
- **`onOpen`** (`(e: ElementEvents["open"]) => void`, optional)
- **`onClose`** (`(e: ElementEvents["close"]) => void`, optional)
- **`onLoadError`** (`(e: ElementEvents["loaderror"]) => void`, optional): Our window could not be reached (network, CSP).
- **`onRecommendation`** (`(r: Recommendation) => void`, optional): The shopper's recommended size in your size labels: on mount when they are already connected, and on every change. Sizes only. Preselect your picker.
- **`demo`** (`DemoOptions`, optional): <FitElement> only, test keys only: demo mode on a named sample body, no sign-in (landing pages). Changing `demo.body` switches the body in place.
  - **`body`** (`string`, required): A sample body id, e.g. `sample-female-165`.
  - **`height`** (`number`, optional): Height of the element in px (default 640).

## Example

**React**

```tsx
<FitElement product="STRAIGHT-JEANS" onSize={({ size }) => selectVariant(size)} />
```

**JavaScript**

```js
elements.create("fit", { product: "STRAIGHT-JEANS" }).mount("#tys-fit");
```