e
sv

React ile kod blokları için daktilo efekti oluşturun

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Bir daktilo efektiyle, kelimeler bir kerede hepsi yerine bir harf olarak görüntülenir ve metnin gerçek zamanlı olarak yazılmış gibi görünmesini sağlar. Yazılı metni kod biçiminde kolayca görüntülemek için bir tür özel renk biçimlendirmesi olan sözdizimi vurgulamayı kullanan Codepen'in açılış sayfasında bir kod bloğu daktilo efekti örneği bulabilirsiniz.

Bu makalede, React ile sıfırdan benzer bir kod bloğu daktilo efekti oluşturmayı öğreneceğiz. Ayrıca önceden var olan bir daktilo paketini kullanan alternatif bir yaklaşım göstereceğiz. Bu öğreticiyi takip etmek için temel React bilgisine ihtiyacınız olacak. Aşağıdakileri ele alacağız:

Bu eğitimin tüm kaynak kodunu bu GitHub deposunda bulabilirsiniz. Başlayalım!

Bağımlılıkları yükleme

React kurulu değilse, sisteminizde proje dizininize gidin, bir komut satırı penceresi açın ve içinde aşağıdaki bash betiklerini çalıştırın:

 npx oluştur-tepki-uygulama daktilo

Yukarıdaki komut, uygulamamızı oluşturmak için gerekli tüm bağımlılıkları içeren typewriter adlı bir React proje klasörü oluşturur. Uygulamamızı kolayca biçimlendirmek için Tailwind CSS kullanacağız . CLI'nizde aşağıdaki komutları çalıştırarak Tailwind CSS'yi yükleyebilirsiniz:

 npm install -D tailwindcss postcss otomatik ön ekleyici
npx tailwindcss init -p

Kurulum tamamlandıktan sonra, aşağıda gösterildiği gibi, tailwind.config.js dosyasını jsx öğeleri desteğine izin verecek şekilde değiştirin:

 /** @type {import('tailwindcss').Config} */
modül.exports = {
  içerik: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  tema: {
    uzatmak: {},
  },
  eklentiler: [],
}

Son olarak, index.css en üst düzeyine aşağıdaki Tailwind CSS yönergelerini ekleyin:

 @tailwind tabanı;
@tailwind bileşenleri;
@tailwind yardımcı programları;

Daktilo efekti oluşturma

Daktilo efektimiz, canlandırmak istediğimiz metni tutacağımız bir kap ve bir daktiloyu taklit etmek için yanıp sönen bir imleç olmak üzere iki ana bölümden oluşacaktır.

Daktilo görüntüleme alanı

İlk olarak, App.js dosyamızda daktilo efekti için görüntüleme penceresini oluşturacağız:

 "./App.css" içe aktar;
"tepki" öğesinden {React, useState, useEffect} içe aktarın;

işlev Uygulama() {
  const [text1, setText1] = useState("const sayHello = () = {");
  const [text2, setText2] = useState("Console.log('merhaba')");
  const [text3, setText3] = useState("//Bu, Merhaba Dünya'yı yazdırır");
  dönüş (
    <div className=" esnek h-ekran yaslama-merkezi öğe-merkezi">
      <div className=" h-1/2 w-1/2 bg-siyah yuvarlak-md esnek öğeler-merkezi pl-6">
        {/* yazar ekranı yazın */}
        <span>
          <div className=" metin-beyaz metin-2xl yanıp sönen-imleç">{text1}</div>
          <div className=" metin-beyaz metin-2xl yanıp sönen-imleç">{text2}</div>
          <div className=" metin-beyaz metin-2xl yanıp sönen-imleç">{text3}</div>
          <div className=" metin-beyaz metin-2xl yanıp sönen-imleç">{`}`}</div>
        </span>
      </div>
    </div>
  );
}

varsayılan Uygulamayı dışa aktar;

Yukarıdaki kod, daktilo efektimizle canlandırmak istediğimiz metni tutacağımız bir kap oluşturur. Yukarıdaki kodu npm start komutu ile çalıştırırsak “Merhaba Dünya!” aşağıdaki resme benzer bir sonuç:

Daktilo Efekt Kabı

Yanıp sönen bir imleç ekleme

Ardından, metnin sonuna yanıp sönen bir imleç oluşturup ekleyeceğiz. Aşağıdaki kodu index.css :

 .bg kodu{
  arka plan rengi: rgb(40, 42, 54);
}

.blinking-imleç::sonra {
  içerik: "|";
  animasyon: 1s adım sonu sonsuz yanıp sönme;
}
@keyframes yanıp söner {
  itibaren,
  ile {
    opaklık: 1;
  }
  %50 {
    opaklık: 0;
  }
}

Yukarıdaki CSS stilleri bir | imleci taklit eden bir yanıp sönme efektine neden olacak şekilde her metnin sonuna

Metne daktilo efekti ekleyin

Daktilo efektimizi oluşturmak için React useEffect Hook'u kullanacağız. Bunu yapmak için kodunuza aşağıdaki değişiklikleri ekleyin:

 const first_text = "const sayHello = () = {";
  const second_text = "console.log('merhaba')";
  const üçüncü_metin = "//Bu, Merhaba Dünya'yı yazdırır";

  const [text1, setText1] = useState("");
  const [text2, setText2] = useState("");
  const [text3, setText3] = useState("");

  useEffect(() => {
    const zaman aşımı = setTimeout(() => {
      setText1(first_text.slice(0, text1.length + 1));
    }, 100);
    return() => clearTimeout(zaman aşımı);
  }, [Metin 1]);

  useEffect(() => {
    const zaman aşımı = setTimeout(() => {
      setText2(second_text.slice(0, text2.length + 1));
    }, 250);

    return() => clearTimeout(zaman aşımı);
  }, [metin2]);

  useEffect(() => {
    const zaman aşımı = setTimeout(() => {
      setText3(üçüncü_metin.slice(0, metin3.uzunluk + 1));
    }, 300);

    return() => clearTimeout(zaman aşımı);
  }, [metin3]);

Yukarıdaki kodda setTimeout fonksiyonu ve dilim operatörü kullandık. setTimeout işlevi, belirtilen aralıktan sonra kod bloğunu yürütür. Tüm dizeyi karakterlere bölmek ve metni her seferinde bir karakter döndürmek için ekleme operatörünü kullanırız.

Geri arama için durumları kullanırız. Her yeni karakter girdiğimizde durum güncellenir ve setTimeout işlevi yürütülür. Sonuç olarak setTimeout , tüm metin tamamen yazılana kadar çalışır.

Metni silme ve yeniden yazma

Daktilo efektini döngüye almak için, kullanıcının metni silmek istediğinde ve yazmayı bitirdiğinde sırasıyla isdeleting ve istyping olmak üzere iki durum ekleyeceğiz:

 const textState = ["istyping", "sdeleting"];
const [typing, setTyping] = useState(textState[0]);

fonksiyon uyku(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

Artık metni yazmak ve silmek için durumlar oluşturduğumuza göre, iki durumdan geçiş arasında bir gecikme oluşturmak için sleep işlevini kullanalım. Bu nedenle, kullanıcı metni yazmayı tamamen bitirdiğinde bir duraklama uygulayacağız. Devam edelim ve kodumuzu aşağıda gösterildiği gibi bu durumları kullanacak şekilde değiştirelim:

 useEffect(() => {
    const zaman aşımı = setTimeout(() => {
      if (yazarak === "istyping" && text1 !== first_text) {
        setText1(first_text.slice(0, text1.length + 1));
      }
      else if (text1 === first_text && yazarak === "istyping"){
        uyku(2000). sonra(()=>{
        setTyping(textState[1])
        })
      }
      else if ( ((text1 === first_text && yazarak==="isdeleting") || yazarak === "isdeleting" ) {
        setText1(first_text.slice(0, text1.length - 1));
        if(metin1.uzunluk<=2){
            setTyping(textState[0])
        }
      }
    }, 100);
  return() => clearTimeout(zaman aşımı);
}, [metin1, yazarak1]);

Yukarıdaki kodda, typing istyping eşit olduğunu ve metnin tam dizeye eşit olmadığını kontrol ediyoruz. Bu true değerini döndürürse, yazma efektini çalıştıracağız. Metin tam dizeye benzer olduğunda, iki saniye sonra isdeleting durumuna geçmek için sleep işlevini kullanırız.

Son olarak, son koşulu, yalnızca tek bir harf kalana kadar her seferinde bir karakter metni silmek için kullanırız. Bu noktada, typing durumu tekrar istyping olarak ayarlanır ve tüm süreç yeniden başlar. Aynısını text2 ve text3 için de yapacağız.

Kod sözdizimini vurgulama

Metnimizi bir kod bloğu gibi görünecek şekilde vurgulamak için, CLI aracılığıyla React Syntax Highlighter'ı yükleyeceğiz:

 npm i tepki-sözdizimi vurgulayıcı

Bu paket kurulduğunda App.js içerisine import edip aşağıdaki gibi kullanabiliriz:

 SyntaxHighlighter'ı 'tepki-sözdizimi-vurgulayıcı'dan içe aktarın;
'tepki-sözdizimi-vurgulayıcı/dist/esm/styles/hljs'den { docco } içe aktarın;
//...
<span>
  <div className=" metin-2xl">
    <SyntaxHighlighter className="blinking-cursor" language="javascript" style={dracula}>
      {Metin 1}
    </SyntaxHighlighter>
  </div>
  <div className=" metin-2xl">
    <SyntaxHighlighter className="blinking-cursor" language="javascript" style={dracula}>
      {metin2}
    </SyntaxHighlighter>
  </div>
  <div className=" metin-2xl">
    <SyntaxHighlighter className="blinking-cursor" language="javascript" style={dracula}>
      {metin3}
    </SyntaxHighlighter>
  </div>
  <div className=" metin-2xl">
    <SyntaxHighlighter className="blinking-cursor" language="javascript" style={dracula}>
      {`}`}
    </SyntaxHighlighter>
  </div>
</span>

Artık Syntax Higlighter bileşenimizi uyguladığımıza göre, daktilo efektimizi tamamlayabiliriz.

Önceden oluşturulmuş bir daktilo kitaplığı kullanma

Kendi daktilo efektimizi kodlamaya ve özelleştirmeye alternatif olarak, zamandan tasarruf etmek için önceden oluşturulmuş bir kitaplık kullanabiliriz.

Daktilo efektini işleyen bir kitaplık örneği, react-typewriter-effect . Bu paketi CLI üzerinden aşağıdaki komutla kurabiliriz:

 npm i tepki-daktilo-etkisi

Kurulum tamamlandıktan sonra, daktilo efekti elde etmek için uygulamamızda aşağıdaki gibi kullanabiliriz:

 TypeWriterEffect'i 'tepki-daktilo-etkisinden' içe aktar;
//...

<TypeWriterEfekt
  textStyle={{ fontFamily: 'Red Hat Display' }}
  startDelay={100}
  imleçColor = "siyah"
  text="Daktilo efekti için metin burada"
  türHız={100}
  silmeHızı={100}
/>

Yukarıdaki kod, belirtilen metin dizesi için bir daktilo efekti üretecektir.

Çözüm

Bu yazıda, React kullanarak kolayca daktilo efekti oluşturmayı öğrendik. Bu özelliği web sitenize veya uygulamanıza uygulamak, görsel ilgi ekleyerek ve kullanıcınızın dikkatini istediğiniz yere yönlendirerek kullanıcı arayüzünüzü iyileştirebilir. Kendi özelleştirmelerinizin çoğunu uygulamak için sıfırdan oluşturduğumuz daktilo efektine ekleyebilir veya react-typewriter-effect gibi bu özelliği sizin için uygulayan bir kitaplık kullanabilirsiniz.

Umarım bu makaleyi beğenmişsinizdir ve herhangi bir sorunuz varsa yorum bıraktığınızdan emin olun. Mutlu kodlama!

LogRocket Blog'da ilk olarak React ile kod blokları için bir daktilo efekti oluşturun yazısı çıktı.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

React ile kod blokları için daktilo efekti oluşturun