React ile Markdown Blog Projeleri için Okuma Süresi Özelliği Ekleme

Bu makalede React projesine bir gönderi için tahmini okuma süresini veren bir özelliğin nasıl ekleneceğinden bahsedeceğim.

Bu makaleyi yazarken ilham aldığım Medium makalesine bir göz atabilirsiniz. Medium mühendisleri bu makalede siteleri için bir okuma süresi özelliğini nasıl uyguladığını açıklamışlar.

Okuma süresinin sadece bir tahmin olduğunu, okuyucunun kabiliyetini veya makalenin konusunun karmaşıklığını dikkate almayan bir tahmin olduğunu kabul ederek bu özelliği benimsemişler.

React projemize tahmini okuma süresi özelliği eklemek için blog-reading-time npm paketini kullanacağız. İlk olarak npm paketini kurarak işe başlayalım.

Aşağıdaki kod bloğunu terminalinizde çalıştırarak paket dosyalarını projemize dahil edelim.

npm i blog-reading-time

Daha sonra özelliği kullanacağımız proje dosyasına, kurduğumuz npm paketini import etmemiz gerekiyor.

import getReadingTime from 'blog-reading-time';

Artık import ettiğimiz getReadingTime() fonksiyonuna okuma süresini hesaplayacağımız içeriğin verisini ekleyerek sonuca ulaşabiliriz.

getReadingTime(blogContent)

Projenizin genel görünümünün aşağıdaki şekilde olması gerekmektedir.

import getReadingTime from 'blog-reading-time';

function App() {

    const blogContent = "Bu örnek bir metindir";

    return (
        <div>
          {getReadingTime(blogContent)} dakikalık okuma
        </div>
    )
}

Bu makale hakkında soru ve görüşlerinizi aşağıdaki yorumlar kısmından yazabilirsiniz. Bana destek vermek için alkış simgesine tıklayabilirsiniz. Sonraki yazımda görüşmek üzere…