HTML String’leri React JSX Elementlerine Dönüştürme

‘html-react-parser’ Kullanımı

1. Uygulama

Bir backend servisinden ya da başka bir veri kaynağından elde edilen string tipindeki HTML, stilleme gerekliliklerine uygun olarak ayrıştırma(parse) işlemine tabi tutulacaktır.

Backend servisten gelen HTML string’ler

• Servisten yukarıdaki şekilde bir veri geldiğini kabul edelim. p, br, span, strong, div vb. elementleri barındıran bu string ifadeyi bir React bileşeni içerisinde kullanabilmek için gerekli olacak işlemler uygulanacaktır.

import Modal from 'react-modal';
import parse from 'html-react-parser';


const FooterModals: FC<ModalProps> = ({isOpen, setFooterModals, content}) => {
 
  return (
    <Modal
      isOpen={isOpen}
      onRequestClose={() => setFooterModals(false)}
      shouldCloseOnOverlayClick={true}
      style={{
        overlay: {
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
        },
        content: {
          display: 'flex',
          flexDirection: 'column',
      }}
    >
      <div title='content' className='policyAndTerms-Content'>
        {parse(`${content}`)}
      </div>
    </Modal>
  );
};

export default FooterModals;

• html-react-parser, HTML string'lerini React bileşenlerine dönüştüren bir kütüphanedir.
• Normalde React uygulamalarında doğrudan HTML string'leri kullanmak güvenli değildir çünkü bu XSS (Cross-Site Scripting) gibi güvenlik açıklarına neden olabilir. Bu durumda kodu temizleyecek faklı yöntemler uygulanmalıdır.

import parse from 'html-react-parser';

// ...
<div title='content' className='mx-2 fs-14 policyAndTerms-Content'>
  {parse(`${content}`)}
</div>

• Bu kod parçasında content prop'u bir HTML string'i içeriyor. parse fonksiyonu, bu string'i alır ve HTML etiketlerini ve yapısını koruyarak React bileşenlerine dönüştürür. Bu sayede, HTML içeriğini React bileşenleri arasında güvenli ve performanslı bir şekilde gösterebilirsiniz.
• Örneğin; content prop'u şu HTML string'ini içeriyor:

"<p>Bu bir <strong>örnek</strong> paragrafıdır.</p>"

• parse fonksiyonu bu string'i alır ve şu şekilde bir React bileşenine dönüştürür:

<p>Bu bir <strong>örnek</strong> paragrafıdır.</p>

• Bu, JSX formatında React bileşenleri olarak render edilir. parse bu şekilde gelen HTML string'lerinin doğrudan DOM'a işlenmesini sağlar.

2. Uygulama

Bir backend servisinden ya da başka bir veri kaynağından elde edilen string tipindeki HTML, event tetikleme gerekliliklerine uygun olarak yer değiştirme(replace) işlemine tabi tutulacaktır.

Backend Servisinden Gelen id’li HTML string’ler

• Bazı durumlarda servisten string olarak bir veri aldığımızda bu yapıları tıklanabilir alanlara dönüştürme ya da özel bir stilleme ekleme gerekliliği ortaya çıkabilir.

import parse from 'html-react-parser';

export const JsxParser = (input: string, getModalContent: (content: number) => void) => {
  return parse(input, {
    replace: (domNode: any) => {
      if (domNode?.attribs?.id === 'privacy') {
        return (
          <span role='button' className='policyAndTermsModalOpener' onClick={() => getModalContent(0)}>
            Privacy Policy
          </span>
        );
      }
      if (domNode?.attribs?.id === 'terms') {
        return (
          <span role='button' className='policyAndTermsModalOpener' onClick={() => getModalContent(1)}>
            Terms&Conditions
          </span>
        );
      }
    },
  });
};

• html-react-parser kütüphanesindeki replace metodu, HTML string'lerini React bileşenlerine dönüştürürken belirli HTML elementlerini özelleştirmek veya değiştirmek için kullanılır.
• replace metodu, parse fonksiyonuna bir seçenek olarak geçirilir ve her bir HTML DOM düğümünü (node) kontrol ederek bu düğümün içeriğini veya tipini değiştirmeyi sağlar. Bu metodun amacı, HTML string'ini React bileşenlerine dönüştürürken belirli koşullara bağlı olarak özelleştirilmiş içerik render etmektir.
• parse Fonksiyonu: input parametresi olarak verilen HTML string'ini alır ve replace metodunu kullanarak bu string'i React bileşenlerine dönüştürür.
• replace Metodu:HTML DOM düğümlerini incelemek için bir fonksiyon (domNode) alır. domNode, parse tarafından sağlanan her bir HTML elementidir.
• domNode içindeki attribs özelliği, elementin HTML özniteliklerine erişim sağlar. Bu örnekte, biz id özniteliğini kontrol ederek yer değiştirme sağladık.
• domNode?.attribs?.id === 'privacy': Eğer domNode'un id özelliği privacy ise, bu element bir span bileşeni ile değiştirilir. Bu span, bir onClick olayına sahiptir ve getModalContent(0) fonksiyonunu çağırır.
• domNode?.attribs?.id === 'terms': Benzer şekilde, eğer domNode'un id özelliği terms ise, bu element de bir span bileşeni ile değiştirilir. onClick olayında getModalContent(1) fonksiyonu çağrılır.
• Ayrıca burada özel bir stilleme gerekliliğinde ‘className’ ya da ‘style’ seçenekleri kullanılabilir.

SONUÇ:

• Gerçek hayat projelerinde yaygın bir kullanım alanına sahip HTML string’lerin ayrıştırılması(parse) özelliğini iki farklı uygulama ile inceledik.
• ‘html-react-parser’ kütüphanesinin sağladığı işlevlere yönelik temel seviyede uygulamalı bir anlatım sunduk.
• 1. uygulamada stilleme işlevlerinin sağlanması yönüyle elementlerin ayrıştırılması(parse), 2. uygulamada özel eventlerin ve stillemelerin yer değiştirme(replace) işlevi ile uygulanmasını sağladık.

KAYNAKÇA:

• https://github.com/remarkablemark/html-react-parser

Yazımı Beğendiniz mi?

Bu yazıyı beğendiyseniz ve faydalı bulduysanız, aşağıdaki alkış butonuna tıklayarak desteğinizi gösterebilirsiniz. Alkışlarınız benim için çok değerli ve daha fazla içerik üretmem için motivasyon kaynağı oluyor.

Ayrıca, düşüncelerinizi ve geri bildirimlerinizi duymaktan mutluluk duyarım. Yorumlar bölümünde fikirlerinizi paylaşarak, bu konudaki görüşlerinizi ve kendi deneyimlerinizi anlatabilirsiniz.

Yeni yazılarımı kaçırmamak için beni takip etmeyi unutmayın! Takip ederek, en son içeriklerimden anında haberdar olabilir ve birlikte öğrenme yolculuğumuza devam edebiliriz.

Teşekkürler ve iyi okumalar!