---
title: "Swap Text"
description: "Yerinde değişen metin: yeni satır hafif bir bulanıklıktan yükselerek gelir, eskisi ters yöne daha hızlı çıkar."
---

<Callout type="info" title="Ne zaman kullanılır">
Duruma göre değişen kısa metinler: etiketler, adım adları, "Yaklaşık 3 dakika kaldı" gibi ipuçları. Değişen bir sayı için [Animated Number](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/animated-number) kullanın. Progress Bar ve Meter, etiket ve ipuçlarını içeride Swap Text ile değiştirir.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/swap-text
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Değişen etiket

Metin değiştiğinde animasyon oynar; aynı metin tekrar verildiğinde hiçbir şey olmaz. İlk çizimde animasyon yoktur. Canlı örnek için [Progress Bar](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/progress-bar) sayfasındaki etiket ve ipucuna bakın.

```tsx
import { SwapText } from "@/components/ikas/swap-text"

export function SyncLabel({ syncing }: { syncing: boolean }) {
  return <SwapText>{syncing ? "Eşitleniyor" : "Eşitlendi"}</SwapText>
}
```

### Metin olmayan içerik

`children` bir string değilse (ikon ve metin birlikte gibi) değişikliği `swapKey` ile tanıtın. `direction={-1}` yeni metni yukarıdan getirir; geri gitmeyi veya azalan bir değeri anlatmak için kullanın.

```tsx
<SwapText swapKey={step.id} direction={forward ? 1 : -1}>
  <StepIcon step={step} /> {step.label}
</SwapText>
```

## Kullanım ilkeleri

**Yapın:**

- Kısa, tek satırlık metinlerde kullanın.
- İleri gitmek ve artan değerler için direction={1}, geri gitmek için -1 verin.
- children string değilse swapKey verin.

**Yapmayın:**

- Paragraflarda veya sık sık (saniyede birkaç kez) değişen metinlerde kullanmayın.
- Sayılar için kullanmayın; o iş Animated Number'ın.

## Erişilebilirlik

- Çıkan eski metin animasyon süresince ekran okuyuculardan gizlenir; yalnızca yeni metin okunur.
- `prefers-reduced-motion` açıkken yalnızca kısa bir opaklık geçişi kalır; kayma ve bulanıklık olmaz.
- Swap Text değişikliği kendisi duyurmaz. Önemli bir durum değişikliğini duyurmak istiyorsanız metni bir `aria-live` bölgesine koyun.

## API

### `SwapText`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `children` (zorunlu) | `React.ReactNode` | - | Gösterilecek metin. Değiştiğinde animasyon oynar; aynı metin tekrar verildiğinde hiçbir şey olmaz. |
| `swapKey` | `React.Key` | - | children string değilse metnin kimliği, örn. adımın id'si. Varsayılan metnin kendisidir. |
| `direction` | `1 \| -1` | `1` | 1: yeni metin aşağıdan yükselir (artan değerler, ileri gitme). -1: yukarıdan iner. |