Photo by hannah joshua on Unsplash

React Tips

React Uygulamalarınıza CMD+K ile Hızlı Arama Ekleme

Çoğu Web sitesinde görmüşsünüzdür. Ekranın üst kısmında bir SearchBar ve ekranın herhangi bir yerinde CMD + K düğmesine bastığınızda bu SearchBar otomatik açılır ve odaklanmak istediğiniz şeye kolayca ulaşabilirsiniz.

CMD + K veya ⌘K ile hızlı arama yapabilmek için bir SearchBar açmak ve tüm sayfalara bunun üzerinden ulaşmak bir standart haline geldi. Yapay- Zeka çözümleri vb yapılar bize artık UI üzerinden menu, düğme vs ile tıklamak yerine bir takım konsollar üzerinden arama yaparak, veya karşılıklı konuşma (Prompt UI) üzerinden işlemler yapmayı alıştırdı.

React Digital Garden üzerinde 195'e yakın örnek bulunuyor. Bunlar içerisinde arama yapmak için Search düğmesine basmanız gerekiyor.

https://onurdayibasi.dev/

Not:
Bu kısımdaki Search ve Liste yapısını nasıl işlediğini ilerleyen vakitlerde LearnReactUI.dev içerisinden ulaşabileceksiniz.

Soru: CMD + K ile Samples listesinde nasıl arama yapabilecek hale getirebiliriz ?

Cevap: Bu kısımda bazı Hazır Open Source kütüphaneler bulunuyor veya kendini yapınıza ufak bir kod yardımı ile entegre edebilirsiniz.

Gelin 2 yöntemden de bahsedeyim.

Open Source (Açık Kaynaklı) Kütüphaneler

Bu alanda bulduğum 2 tane sıkça kullanılan açık kaynaklı kütüphaneden bahsetmek istiyorum.

CMDK

GitHub - pacocoursey/cmdk: Fast, unstyled command menu React component.

Kbar

GitHub - timc1/kbar: fast, portable, and extensible cmd+k interface for your site

Bu kütüphaneler tabiki bu işe özelleşmiş araçlar. Digital Garden içerisinde önceden Antd bileşen kütüphanesi üzerine geliştirmiş olduğum bir Sample listesi ve Search yapısı olduğu için bu kütüphanelere geçmek yerine CMD +K kendi yapıma ekleyebilirmiyim diye düşündüm.

CMD +K SearchBar Kendimizi Nasıl Geliştirebiliriz ?

Digital Garden’ da Sample düğmesi ile açılan kısmı nasıl Cmd + K veya Ctrl +K kısayol düğmelerini Samples Drawer açılmasına nasıl bağlayabilirim?

Öncelikle heryerde kullanabileceğimiz CMD + K key düğmelerine basmayı dinleyecek bir Custom Hook yazalım .

import {useEffect} from 'react';

const useCmdKShortcut = (callback) => {
  useEffect(() => {
    const handleKeyDown = (event) => {
      const isCmdOrCtrlPressed = event.metaKey || event.ctrlKey;
      if (isCmdOrCtrlPressed && event.key === 'k') {
        callback();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [callback]);
};

export default useCmdKShortcut;

Sonrasında bunu DigitalGarden da kullanılan SimplePageLayout ekleyerek tüm sayfalarda kullanılabilecek hale getiriyorum.

Drawer sadece su anda ana indeks ekranında bulunuyor cmdCallback’ de openSamples() ile ilgili Sample açıyoruz.

Diğer bir konu ise açılan Drawer’ da Search Samples kısmına nasıl odaklanacak ?

https://onurdayibasi.dev/

Oncelikle bir useRef ile Input için referans oluşturulup.

  const searchInputRef = React.useRef(null);

Sonra Input Search’ in referansını alıyoruz.

        <Input.Search
          style={{width: 300}}
          placeholder="Search Samples"
          onChange={(e) => setSearchText(e.target.value)}
          ref={searchInputRef}
        ></Input.Search>

CMD + K düğmesi sonucunda Drawer açıldıktan sonra Input alanına odaklanmak için afterOpenChange içerisinde .focus() çalıştırarak ilgili alana odaklanmayı sağlar.

<Drawer
    afterOpenChange={() => {
            if (open === 'samples' && searchInputRef.current) {
              searchInputRef.current.focus();
            }
          }}
          title={getDrawerTitle(open)}
          placement="right"
          onClose={onClose}
          open={open}
        >
          {getDrawerContent(open)}
        </Drawer>

Ne Gibi İyileştirmeler Ekleyebiliriz

Tabiki bu CMD + K ile SearchBar ile yapabileceklerimizin son hali değil buna istersek ileride

• Key Up, Key Down düğmeleri ile listede gezme
• CMD+ K kısayolunun tüm sayfalardan kullanılabilir hale getirebiliriz.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.