React State ile Dropdown menü nasıl yapılır? 2022

Javascript’in bir kütüphanesi olan react state yöntemi ile Dropdown menü yani açılır kapanır menü nasıl yapılır onu anlatacağım. Dropdown menüler genelde filtreleme işlemlerinde , arama işlemlerinde ve header alanında bulunan menülerde kullanılır. Bootstrap kütüphenesin de bununla ilgili bir component de bulunmakta ama ben sizlere hiçbir şekilde bir css kütüphenesi kullanmadan React state yönetimi ile nasıl dropdown menü yapabilirsiniz onu anlatacağım. Hadi başlayalım.

Terminal satırımızı açalım. Ardından aşağıdaki komutu çalıştıralım. Projenin kurulması 1-2 dakika alabilir.

npx create-react-app react-state-dropdown

cd react-state-dropdown : Terminalde klasörün içine girmek için kullanılır.

npm start : Projeyi çalıştırmak için kullanılır.

code . : Bulunan dizini vscode programında açmak için kullanılır.

Yukarıdaki komutların yardımıyla projemizi vscode programında açalım. Ardından npm start komutu ile projemizi çalıştıralım.

Proje ilk çalıştığında react ın default template’i gelecektir. Ben bazı dosyalarda küçük temizleme işlemi yaptım. Aşağıda sizler ile bu değişikleri paylaşıyorum.

import React, { useState } from "react";
import "./App.css";

const App = () => {
  return (
    <>
      <h1>React State Dropdown</h1>
    </>
  );
};

export default App;

App.js de return içerisinde default olarak gelen kodları sildikten sonra yukarıdaki gibi düzenleme yaptım. Ek olarak react kütüphanesinden useState ide import ettim.

App.css dosyasının içerisinde bulunan tüm kodları sildim. Projeyi yaparken bu dosya yeniden kod eklemesi yapacağız.

Projeye başlamadan önce figma programı üzerinde basit bir dropdown menü tasarımı yaptım.

Yukarıda paylaştığım tasarımın kodlamasını yapıyorum. Bunun için App.js, App.css dosyalarında yapmış olduğum değişiklikleri aşağıda paylaşıyorum.

import React, { useState } from "react";
import "./App.css";

const App = () => {
  const [status, setStatus] = useState(false);
  const [dropdownText, setDropdownText] = useState("Select an option");
  return (
    <>
      <div className="container">
        <h1>React State Dropdown</h1>
        <div className="dropdown">
          <div
            onClick={() => {
              setStatus(!status);
            }}
            className="dropdown-button"
          >
            <span className="dropdown-icon">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 16.75C9 16.5511 9.07902 16.3603 9.21967 16.2197C9.36032 16.079 9.55109 16 9.75 16H14.25C14.4489 16 14.6397 16.079 14.7803 16.2197C14.921 16.3603 15 16.5511 15 16.75C15 16.9489 14.921 17.1397 14.7803 17.2803C14.6397 17.421 14.4489 17.5 14.25 17.5H9.75C9.55109 17.5 9.36032 17.421 9.21967 17.2803C9.07902 17.1397 9 16.9489 9 16.75ZM6 12.25C6 12.0511 6.07902 11.8603 6.21967 11.7197C6.36032 11.579 6.55109 11.5 6.75 11.5H17.25C17.4489 11.5 17.6397 11.579 17.7803 11.7197C17.921 11.8603 18 12.0511 18 12.25C18 12.4489 17.921 12.6397 17.7803 12.7803C17.6397 12.921 17.4489 13 17.25 13H6.75C6.55109 13 6.36032 12.921 6.21967 12.7803C6.07902 12.6397 6 12.4489 6 12.25ZM3 7.75C3 7.55109 3.07902 7.36032 3.21967 7.21967C3.36032 7.07902 3.55109 7 3.75 7H20.25C20.4489 7 20.6397 7.07902 20.7803 7.21967C20.921 7.36032 21 7.55109 21 7.75C21 7.94891 20.921 8.13968 20.7803 8.28033C20.6397 8.42098 20.4489 8.5 20.25 8.5H3.75C3.55109 8.5 3.36032 8.42098 3.21967 8.28033C3.07902 8.13968 3 7.94891 3 7.75Z"
                  fill="white"
                />
              </svg>
            </span>
            <span>{dropdownText}</span>
          </div>
          {status && (
            <div className="dropdown-menu-list">
              <div
                onClick={() => {
                  setDropdownText("Best Match");
                  setStatus(!status);
                }}
                className="dropdown-menu-item"
              >
                Best Match
              </div>
              <div
                onClick={() => {
                  setDropdownText("Highest Price");
                  setStatus(!status);
                }}
                className="dropdown-menu-item"
              >
                Highest Price
              </div>
              <div
                onClick={() => {
                  setDropdownText("Lowest Price");
                  setStatus(!status);
                }}
                className="dropdown-menu-item"
              >
                Lowest Price
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
};

export default App;

@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");

* {
  font-family: "Rubik", sans-serif !important;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0 0 0;
  flex-direction: column;
}

.dropdown {
  min-width: 204px;
}

.dropdown-button {
  background: #434343;
  border: 2px solid #000000;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: start;
  color: #ffffff;
  margin-bottom: 8px;
}

.dropdown-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.dropdown-menu-list {
  background: #434343;
  border: 2px solid #000000;
  border-radius: 8px;
  padding: 8px;
}

.dropdown-menu-item {
  padding: 6px 8px;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  color: #ffffff;
}

.dropdown-menu-item:not(:last-child) {
  margin-bottom: 4px;
}

.dropdown-menu-item:hover {
  background: #00c896;
  color: #ffffff;
  cursor: pointer;
}

Yukarıdaki kodlamaları yaptıktan sonra tarayıcıda alacağımız çıktı aşağıdaki gifte gözüktüğü gibi olacaktır.

React ile state yöntemini kullanarak dropdown menü(Açılır kapanır menü) yapmak bu kadar kolay. Küçükte olsa useState ve kodlamada yapmış olduğum bazı yapılara da değinmek istiyorum.

useState() : Bileşeni globaldeki state’ini yönetmemizi sağlayan bir React Hook aracıdır.

setStatus(!status) : Bu şekilde stade değiştirmek bize bir toggle işlemi yapmamızı sağlayacaktır.

Evet react state yapısını kullanarak nasıl dropdown menü yapabileceğimizi öğrenmiş olduk. Bir sonraki blog yazımda görüşmek üzere …