React ile Accordion: Açılır/Kapanır İçerik Oluşturma – Örnek Uygulama

Bu yazıda, sizlerle React ile akordion (accordion) bileşeni oluşturmayı öğreteceğiz. Geçtiğimiz günlerde bir proje için ihtiyacım oldu, belki 8/10 farklı kütüphane denedim ancak hiçbiri istediğim sonucu vermedi, ben de react ın kendi sınıfını kullanmaya karar verdim.

Akordion, birbiri üzerine katlanmış bölümlerden oluşan bir kullanıcı arayüzü öğesidir. Her bir bölüm, bir başlık ve ilgili içeriğe sahiptir. Kullanıcı başlığa tıkladığında, ilgili içerik açılır veya kapanır.

Bu makalede, örnek bir uygulama ile birlikte React’te nasıl akordion bileşeni oluşturacağınızı öğreneceksiniz.

Akordion Nedir?

Akordion, web sitelerinde ve uygulamalarda sıklıkla kullanılan bir kullanıcı arayüzü öğesidir. Kullanıcı arayüzünde yer tasarrufu sağlar ve kullanıcıların yalnızca ilgilendikleri bilgileri okumasına olanak tanır. Örneğin, bir SSS (Sıkça Sorulan Sorular) bölümü akordion kullanılarak oluşturulabilir.

React ile Akordion Oluşturma

React’te akordion oluşturmak için aşağıdaki adımları takip edebilirsiniz:

1. CSS Tanımlama: İlk olarak, akordionumuzun stilini tanımlayalım. Bu kod bloğunda, renk değişkenleri ve akordionun farklı bölümleri için stilleri tanımladık.

$blue: #2196F3;
$grey: #E0E0E0;
$white: #FFFFFF;

body {
  font-family: 'Roboto', sans-serif;
  background: $grey;
  padding: 24px;
}

.accordion {
  max-width: 800px;
  margin: 0 auto;
}

.accordionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: $blue;
  color: $white;
  border-bottom: 1px solid darken($blue, 6%);
  transition: 0.14s;
  
  &:hover {
    background: lighten($blue, 6%);
    cursor: pointer;
  }
  
  svg {
    width: 24px;
    height: 24px;
    fill: $grey;
  }
}

.accordionContent {
  padding: 16px;
  background: $white;
}

2. React Bileşeni Oluşturma:
   Şimdi, akordion bileşenimizi oluşturacağız. Accordion isminde bir React sınıf bileşeni tanımlayarak başlayalım. Bu bileşen, başlık ve içerik olmak üzere iki prop (özellik) alacaktır.

class Accordion extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      display: 'none',
      transform: ''
    };
    
    this.toggle = this.toggle.bind(this);
  }
  
  toggle() {
    const newDisplay = this.state.display == 'block' ? 'none' : 'block';
    const newTransform = this.state.transform == 'rotate(180deg)' ? '' : 'rotate(180deg)';
    this.setState({
      display: newDisplay,
      transform: newTransform
    });
  }
  
  render() {
    return(
      <div className="accordion">
        <div className="accordionHeader" onClick={this.toggle}>
          <p>{this.props.accordionTitle}</p>
          <svg style={{ transform: this.state.transform }} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
            <path d="M0-.75h24v24H0z" fill="none"/>
          </svg>
        </div>
        <div className="accordionContent" style={{ display: this.state.display }}>
          <p>{this.props.accordionContent}</p>
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <Accordion
         accordionTitle="One"
         accordionContent="Lorem ipsum..."
       />
      <Accordion
         accordionTitle="Two"
         accordionContent="Lorem ipsum..."
       />
      <Accordion
         accordionTitle="Three"
         accordionContent="Lorem ipsum..."
       />
    </div>
   );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Bölüm 3: Kodun Çalışması

Yukarıdaki kod parçasında yaptıklarımızı daha detaylı inceleyelim:

• constructor: Bileşen ilk oluşturulduğunda çalışır. Burada state’i başlatıyoruz. display: 'none' ile içerik başlangıçta gizli olacak şekilde ayarlıyoruz. transform: '' ise açma/kapama animasyonu için kullanılan bir SVG ikonu üzerindeki dönüşüm özelliğini kontrol ediyor.
• toggle: Bu metod, akordionun açılıp kapanmasını sağlar. Tıklama olayı gerçekleştiğinde çağrılır ve state’i güncelleyerek display ve transform değerlerini değiştirir. Bu sayede içerik gösterilir veya gizlenir ve SVG ikonu döner.
• render: Bileşenin kullanıcı arayüzünü oluşturan metottur. Burada HTML yapısını oluşturuyoruz. accordionHeader sınıfına sahip div, başlık ve açma/kapama ikonunu içerir. onClick olayı ile toggle metodu çağrılır. accordionContent sınıfına sahip div ise içeriği tutar ve display state’i ile kontrol edilir.

Bölüm 4: Uygulamanın Tamamlanması

Şimdi App.js dosyamızda Accordion bileşenini kullanarak birkaç örnek akordion oluşturalım:

function App() {
  return (
    <div>
      <Accordion
        accordionTitle="One"
        accordionContent="Lorem ipsum..."
      />
      <Accordion
        accordionTitle="Two"
        accordionContent="Lorem ipsum..."
      />
      <Accordion
        accordionTitle="Three"
        accordionContent="Lorem ipsum..."
      />
    </div>
  );
}

Burada Accordion bileşenini üç kez kullanarak farklı başlık ve içeriklere sahip akordionlar oluşturduk.

Bölüm 5: Ek Özellikler ve Geliştirmeler

• Çoklu Akordion: Eğer birden fazla akordionun aynı anda açık kalmasını istemiyorsanız, tüm akordionların state’ini yönetecek bir üst bileşen oluşturabilirsiniz.
• Animasyonlar: CSS veya JavaScript animasyon kütüphaneleri kullanarak daha akıcı animasyonlar ekleyebilirsiniz.
• Erişilebilirlik: Klavye ile kullanım ve ekran okuyucu uyumluluğu için gerekli özellikleri ekleyebilirsiniz.
• Custom Hook: Akordion mantığını tekrar tekrar kullanmak yerine, bir custom hook oluşturarak kod tekrarını azaltabilirsiniz.

Sonuç

Bu makalede React ile basit bir akordion bileşeni nasıl oluşturulacağını adım adım gösterdim. Bu bileşeni kendi projelerinizde kullanabilir ve ihtiyaçlarınıza göre özelleştirebilirsiniz. Akordionlar, kullanıcı arayüzünü daha düzenli ve kullanışlı hale getirmek için harika bir araçtır.

Örnek Uygulamayı Çalıştırma:

1. Bir React projesi oluşturun.
2. Yukarıdaki kodları proje klasörünüze ekleyin.
3. Projenizi başlatın ve tarayıcınızda açın.

Ek Kaynaklar:

• React resmi dokümantasyonu
• CSS-in-JS çözümleri (styled-components, emotion)
• Animasyon kütüphaneleri (React Spring, Framer Motion)

Not: Bu makale, React ile akordion oluşturmanın temel bir örneğini sunmaktadır. Daha karmaşık ve özel ihtiyaçlara yönelik akordionlar için daha gelişmiş teknikler kullanabilirsiniz.

Fatih Soysal – Software Engineer

Bu makaleyi beğendiyseniz lütfen paylaşın ve yorum yapın.

#react #accordion #javascript #webdevelopment

Umarım bu makale size yardımcı olmuştur. Başka sorularınız olursa çekinmeden sorabilirsiniz.