TR

TypeScript ile React'te Popup Oluşturun

TypeScript ve React yardımıyla “Popup” oluşturmaya yönelik küçük bir kılavuz.

---

Gerekli paketleri yükleyin

Aşağıdaki komutu kullanarak styled-components paketini kuracağız : styled components, React componentlerini CSS ile şekillendirmek için kullanılan popüler bir kütüphanedir.

npm i styled-components

1. Adım

• src klasörü içerisinde components adında yeni bir klasör oluşturun. Projelerimizde basit ve iç içe klasörlerin az olduğu bir yapı tercih etmeliyiz çünkü daha organize bir klasör yapısı proje geliştikçe büyük kolaylık sağlayacaktır. Burada components yani bileşenler klasörümüzü oluşturarak her bir bileşen için alt bir klasörleme yapabilirsiniz bu size kolaylık sağlayacaktır ve genel kullanım bu şekildedir..
• component klasörünün içerisinde popup adında yeni bir klasör oluşturun. Böylelikle popup bileşenine ait kodları bu klasör altında oluşturarak karışıklığın önüne geçmiş olursunuz.

src

├── components

│ ├── popup

• Popup klasörü altında aşağıdaki kodları içeren index.styled.ts adlı bir typescript dosyası oluşturun. Bu oluşturduğumuz dosya paket olarak kurduğumuz styled-components stil kodlarını içermektedir.
  • index.styled.ts : Buradaki kodları açıklamak gerekirse popup bileşenimize ait style özelliklerimizi belirlemek için daha önce paket olarak kurduğumuz syled-components paketinden yardım alarak syles özelliklerini belirtiyoruz.
• Daha sonra aşağıdaki kodla index.tsx adlı bir dosya oluşturun.
  • index.tsx : Bu dosyayı oluşturmamızdaki amaç popup bileşenimizi işlemek (render etmek) için oluşturuyoruz. src

├── components

│ ├── popup

│ │ ├── index.styled.ts

│ │ ├── index.tsx

Burada oluşturduğumuz kodlara göz atalım

• Kullanıcı arayüzü oluşturmanızı sağlayan Javascript kütüphanesini. Aşağıdaki şekilde dahil ediyoruz.

import React from "react";

• Popup isminde bir fonksiyon oluşturuyoruz.

const Popup = () => { return( <> Hello Popup! <> ) }

• Daha sonra oluşturduğumuz style özelliğimizi ekliyoruz. Aşağıdaki şekilde dahil ediyoruz.

import {Area, Background} from "./index.styled"

const Popup = () => { return( <Area> <Background/> </Area> < div className="content"> Hello Popup! </ div> ) }

• Oluşturduğumuz fonksiyon için kullanacağımız bileşenleri belirliyoruz. Bunun için Props isminde bir type oluşturuyoruz.
  • show isminde boolean tipinde popup clasımızın durumunu tutmak için bir tip oluşturuyoruz.
  • close isminde void tipinde popup clasımızın durumunu tetiklemek için bir tip oluşturuyoruz.
  • title isminde string tipinde popup clasımızın başlık bilgisini tutmak için bir tip oluşturuyoruz.
  • desc isminde string tipinde popup clasımızın açıklama bilgisini tutmak için bir tip oluşturuyoruz.

type Props = { show: boolean; close: () => void; title?: string; desc?:string; }

• Oluşturduğumuz bileşenleri fonksiyonumuzda kullanmak için bileşenleri React.FC yapısı ile fonksiyona dahil ediyoruz.

const Popup:React.FC<Props> = (props) => { return( <Area> <Background/> </Area> < div className="content"> Hello Popup! </ div> ) }

• index.styled.ts içerisinde Background isminde style-components yardımı ile bir div oluşturduk ve bu div içerisinde herhangi bir yere fare ile tıklandığında popup kapatılmasını istiyoruz bu yüzden onClick yapısından yararlanabiliriz:

• show isminde boolean tipinde bir değişken belirlemiştik render durumunu kontrol etmek için bu değişken false değer döner ise render işlemini tamamlamak için bunu bir if içerisine alarak return olarak null dönmesini sağlıyoruz eğer true döner ise return işlemini tamamlıyoruz.

const Popup:React.FC<Props> = (props) => { if (!props.show) return null; return( <Area> <Background onClick={() => props.close()}/> </Area> < div className="content"> Hello Popup! </ div> ) }

• Daha sonra popup content kısmında yer alacak bileşenleri belirlemek için return içerisine oluşturduğumuz div içerisine render edilecek bileşenlerimizi ekliyoruz.

const Popup:React.FC<Props> = (props) => { if (!props.show) return null; return( <Area> <Background onClick={() => props.close()}/> < div className="content"> {props.title && <h3 className="title">{props.title}</h3>} {props.desc && <p className="desc">{props.desc}</p>} </ div> </Area> ) }

• Oluşturduğumuz popup fonksiyonu aşağıdaki şekilde çağırarak kullanabiliriz.

<Button primary onClick={() => setShow(true)}>Popup</Button>

<Popup show={show} title={"Popup Title"} buttons={[pageReload]} close={()=> setShow(false)}/>