React projelerinde kullanıcı etkileşimini sağlamak için sıkça kullanılan bileşenlerden biri de toggle switch yani açma-kapama düğmesidir. Bu makalede, basit bir toggle switch'in nasıl yapıldığını ve React'in useState hook'unun bu süreçte nasıl yardımcı olduğunu öğreneceksiniz.

Toggle Switch Nedir?

Toggle switch, genellikle iki durum arasında geçiş yapan (açık/kapalı gibi) bir kullanıcı arayüzü öğesidir. React'te bu işlevselliği oluşturmak için state yönetimini kullanırız.

Adım Adım Toggle Switch Oluşturma

İlk olarak React bileşenimizi oluşturacak ve bileşenin durumunu useState ile tanımlayacağız.

import React, { useState } from 'react';

function ToggleSwitch() {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => {
    setIsOn(prevState => !prevState);
  };

  return (
    <div>
      <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
        <input type="checkbox" checked={isOn} onChange={toggle} style={{ display: 'none' }} />
        <span style={{
          width: '50px',
          height: '25px',
          background: isOn ? '#4caf50' : '#ccc',
          borderRadius: '25px',
          position: 'relative',
          transition: 'background-color 0.3s'
        }}>
          <span style={{
            position: 'absolute',
            top: '2px',
            left: isOn ? '26px' : '2px',
            width: '21px',
            height: '21px',
            background: '#fff',
            borderRadius: '50%',
            transition: 'left 0.3s'
          }}></span>
        </span>
        <span style={{ marginLeft: '10px' }}>{isOn ? 'Açık' : 'Kapalı'}</span>
      </label>
    </div>
  );
}

export default ToggleSwitch;

Kod Açıklaması

• useState(false) ile başlangıçta toggle kapalı (false) olarak ayarlanır.
• toggle fonksiyonu çağrıldığında, isOn değeri tersine çevrilir.
• Checkbox input görünmez hale getirilip, stil ile özel bir switch görünümü oluşturulur.
• Switch'in açık/kapalı durumu arka plan ve konum değişiklikleriyle görselleştirilir.
• Durumu kullanıcıya göstermek için metin olarak Açık veya Kapalı yazılır.

Sonuç

Bu yöntemle React projelerinizde kolayca işlevsel ve estetik toggle switchler oluşturabilirsiniz. useState hook'u sayesinde durum kolayca yönetilir ve kullanıcı etkileşimi sağlanır.

Dilerseniz bu bileşeni geliştirerek, farklı renkler, animasyonlar veya form kontrolleriyle entegrasyon sağlayabilirsiniz.