---
title: Custom Data
description: Temel prop tiplerini birleştirerek component'lerinize özel veri yapıları oluşturmanızı sağlayan custom data tipleri.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

Temel prop tipleri, component'lerinizin ihtiyaç duyduğu tüm verileri sağlamaya her zaman yetmeyebilir. Bu noktada custom data tipleri devreye girer: component'leriniz için kendinize özgü veri tipleri oluşturabilirsiniz.

Bunu bir örnekle açıklayalım. Görselleri slide olarak gösteren ve her görselin üzerinde isteğe bağlı bir başlık ile buton bulunan bir slider component'iniz olduğunu düşünün.

![Slider component örneği](https://builders.ikas.com/media/ikas-dev/slider-example-834c39aea39ef24bb23527b481d7462f.jpg)

Yalnızca tek bir slide göstermeniz gerekseydi, temel prop tipleriyle aşağıdaki prop'ları tanımlamanız yeterli olurdu:

```tsx
export type SlideTestProps = {
  ... your other props
  image: IkasImage;
  title?: string;
  buttonLink?: IkasNavigationLink;
}
```

Ancak bir slider component'inde mağaza sahibinin birden fazla slide ekleyebilmesi gerekir; yani bu slide verisinden oluşan bir dizi istemeniz gerekir. Şimdi bu diziyi bir custom data tipi olarak tanımlayalım.

<iframe src="https://demo.arcade.software/aZB5IrHrmGptduRc07LB?embed" title="Custom data tipinin tanımlanması" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

Custom data tanımlandıktan sonra onu component'lerinizde prop olarak kullanabilirsiniz. Şimdi `Slider` component'imizi tanımlayalım.

<iframe src="https://demo.arcade.software/MVaXjRR4DISx6gkIuMk8?embed" title="Slider component'inin tanımlanması" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

Kaynak koda kısaca göz atalım.

<iframe src="https://demo.arcade.software/cITGPhGtd0jcY2MkRLEa?embed" title="Slider component'inin kaynak kodu" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

Editörün custom data'mızı nasıl gösterdiğini görmek için component'imizi bir sayfaya ekleyelim.

<iframe src="https://demo.arcade.software/FHCTdwiGdHbs3CpH0Las?embed" title="Custom data'nın editörde görünümü" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

Slider component'inin [kaynak kodunun tamamına](https://github.com/ikascom/ikas-examples/tree/main/slider-theme) GitHub üzerinden ulaşabilirsiniz.

## Özet [#summary]

Custom data tipleri, diğer prop tiplerini bir araya getirerek istediğiniz veri yapısını oluşturmanıza olanak tanır. Bu örnekte kendi ihtiyacımıza yönelik çok özel bir veri tipi oluşturduk ve mağaza sahibi bu tipe, standart prop tiplerine çok benzer bir şekilde değer girebildi. Ayrıca custom data tiplerinin iç içe nasıl kullanılabileceğini de gördük; bu özellikle enum'ları farklı custom data tiplerinde tekrar tekrar kullanmak için oldukça işe yarar. Component'lerinizin çoğu custom data tiplerine ihtiyaç duyacağından bu prop tipini sıkça kullanacaksınız.

<Callout type="info" title="Veri tasarımına dikkat edin">
Mağaza sahibinden istediğiniz veri ne kadar karmaşık olursa değer girmek onun için o kadar kafa karıştırıcı hale gelir. Gerektiği yerlerde her veri satırı için açıklama ekleyin ve mümkün olduğunca iç içe veri yapılarını en aza indirin.
</Callout>