Altbilgi içeriğine atla
  1. IronPDF for Node.js
  2. IronPDF for Node.js Blogu
  3. Node Yardım
  4. linkify-react
NODE YARDıM

linkify-react (Nasıl Çalışır: Geliştiriciler İçin Bir Kılavuz)

Darrius Serrant
Darrius Serrant
Güncellendi:

Genis web geliştirme dunyasinda, metin icerisinde tiklanabilir linkler veya baglayici taglar oluşturmak temel bir gorevdir. Bir blog, sosyal medya platformu veya e-posta istemcisi insa ediyor olun, URL'leri, e-posta adreslerini ve diğer metinleri otomatik olarak algilama ve tiklanabilir linklere dönüştürme yetenegi, sorunsuz bir kullanıcı deneyimi saglamak icin kritik oneme sahiptir. Linkify React'e girin – React uygulamalarinda bu sureci duzene koymak icin tasarlanmis guclu bir npm paketi. Bu makalede, React projelerinizde link oluşturmayi basitlestirmek icin Linkify'i nasıl kullanabileceginizi inceleyecegiz ve kullanimini gösterirken kod örnekleriyle birlikte olacagiz.

Bunun otesinde, web sayfalarinizdan yuksek kaliteli PDF belgeleri oluşturmaniza izin veren çok yonlu bir kutuphane olan IronPDF ile tanistiracagiz. Size IronPDF'i Linkify ile birlikte kullanarak Linkify tarafindan tanimlanmis ve dönüştürulmus tiklanabilir linkleri koruyan PDF'ler kolayca oluşturabileceginizi göstericegiz, belgelerinizin web iceriginizle ayni etkileşimlilige sahip olmasini saglar.

Linkify React Bileseni ile Başlarken

Linkify React, URL'ler, e-posta adresleri ve cocuk stringler icinde bulunan diğer kesfedilen linkleri tiklanabilir hiperlinkler olarak dönüştürmenin otomatik hale getirilmesini saglayan hafif ve kullanimi kolay bir npm paketidir. Manuel link ayristirma ve formatlama ihtiyaçini ortadan kaldirir, geliştiricilerin degerli zaman ve emeğini korur. Linkify'i React uygulamalariniza nasıl entegr edebileceginize bir bakalim.

Kurulum

React Linkify ile başlamak icin, onu projenize bir bagimlilik olarak yuklemeniz gerekir. Bunu npm veya yarn kullanarak yapabilirsiniz. Terminalinizi acin ve asagidaki komutu calistirin:

npm install react-linkify
# or
yarn add react-linkify
npm install react-linkify
# or
yarn add react-linkify
SHELL

Kullanimi

React Linkify yuklendikten sonra, onu React bilesenlerinize kolayca entegre edebilirsiniz. React Linkify'i metin iceriginde tiklanabilir linkler işlemek icin nasıl kullanacaginizi gösteren basit bir örnek:

import React from 'react';
import Linkify from 'react-linkify';

// A React component to display clickable links
const MyComponent = () => {
  return (
    <div>
      <h1>Clickable Links with React Linkify</h1>
      <Linkify>
        <p>
          Check out this cool website: https://example.com
          <br />
          You can also reach me at hello@example.com
        </p>
      </Linkify>
    </div>
  );
};

export default MyComponent;
import React from 'react';
import Linkify from 'react-linkify';

// A React component to display clickable links
const MyComponent = () => {
  return (
    <div>
      <h1>Clickable Links with React Linkify</h1>
      <Linkify>
        <p>
          Check out this cool website: https://example.com
          <br />
          You can also reach me at hello@example.com
        </p>
      </Linkify>
    </div>
  );
};

export default MyComponent;
JAVASCRIPT

Bu örnekte, react-linkify paketinden Linkify bileşenini içe aktarırız ve metin içeriğimizi onun içine sararız. React Linkify, metin icindeki URL'leri ve e-posta adreslerini otomatik olarak algilayip tiklanabilir hiperlinklere dönüştürur.

Ozellestirme

Linkify, uretilen linklerin davranis ve gorunumunu ozellestirmek icin çeşitli rekvisitler, nitelikler ve seçenekler saglar. Örneğin, bağlantıların nasıl açılacağını kontrol etmek için target özniteliklerini belirleyebilirsiniz. React Linkify'in davranisini nasıl ozellestirebileceginiz soyle:

<Linkify properties={{ target: '_blank' }}>
  <p>
    Clickable links will open in a new tab: https://example.com
  </p>
</Linkify>
<Linkify properties={{ target: '_blank' }}>
  <p>
    Clickable links will open in a new tab: https://example.com
  </p>
</Linkify>
JAVASCRIPT

IronPDF'i Tanıtma

IronPDF, Node.js uygulamalarinda PDF oluşturmayi kolaylastirmak icin tasarlanmis guclu bir npm paketidir. HTML icerigi, URL'ler veya mevcut PDF dosyalarindan PDF belgeleri oluşturmanizi saglar. Fatura, rapor veya baska herhangi bir tur dokumentasyon uretirken, IronPDF, sezgisel API'si ve guclu özellik seti ile sureci basitlestirir.

linkify-react (Nasıl Calisir: Geliştiriciler Icin Bir Rehber): Sekil 1 - IronPDF for Node.js: The Node.js PDF Library Website

IronPDF'un temel özellikleri sunlardir

1. HTML'den PDF'e Dönüştürme

HTML ogelerini kolayca PDF belgelerine dönüştürun. Bu özellik, web içeriğinden dinamik PDF'ler üretmek için özellikle kullanışlıdır.

2. URL'den PDF'e Dönüştürme

URL'lerden doğrudan PDF oluşturun. Bu, web sayfalarının içeriğini yakalamanız ve programlı olarak PDF dosyaları olarak kaydetmenizi sağlar.

3. PDF Manipülasyonu

Mevcut PDF belgelerini kolayca birleştirin, ayırın ve yönetin. IronPDF, PDF dosyalarını manipüle etmek için sayfa ekleme, belgeleri bölme ve daha fazlası gibi işlevsellikler sağlar.

4. PDF Güvenliği

PDF belgelerinizi şifrelerle şifreleyerek veya dijital imzalar uygulayarak güvence altına alın. IronPDF, hassas belgelerinizi yetkisiz erişimden korumak için seçenekler sunar.

5. Yüksek Kaliteli Çıktı

Metin, resim ve biçimlendirmenin hassas bir şekilde işlendiği yüksek kaliteli PDF belgeleri üretin. IronPDF, oluşturulan PDF'lerin orijinal içeriği korumasını sağlar.

6. Çapraz Platform Uyumluluğu

IronPDF, Windows, Linux ve macOS dahil olmak üzere çeşitli platformlarla uyumludur, bu da onu geniş bir geliştirme ortamı yelpazesi için uygun kılar.

7. Basit Entegrasyon

IronPDF'i npm paketi ile Node.js uygulamalarınıza kolayca entegre edin. API iyi belgelenmiştir, bu da projelerinize PDF oluşturma yeteneklerini kolayca eklemenizi sağlar.

Bir web uygulamasi, sunucu tarafinda calisan bir betik veya bir komut satiri araci insa ediyor olun, IronPDF, profesyonel kalitede PDF belgeleri etkin bir sekilde ve guvenilir bir sekilde oluşturmanizi saglar.

IronPDF ve Linkify React kullanarak PDF Belgeleri oluşturma

Bagimliliklari Yukleme

Oncelikle, asagidaki komutu kullanarak yeni bir Next.js projesi oluşturun (eger zaten oluşturmamis iseniz):

npx create-next-app@latest linkify-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
npx create-next-app@latest linkify-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
SHELL

Sonra, proje dizininize gidin:

cd linkify-ironpdf
cd linkify-ironpdf
SHELL

Gerekli paketleri yükleyin:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add react-linkify
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add react-linkify
SHELL

Bir PDF Oluşturun

Simdi, IronPDF kullanarak bir PDF oluşturmanin basit bir ornegini oluşturalim. Your Next.js bileşeninizde (örn. pages/index.tsx), aşağıdaki kodu ekleyin:

PDF Oluşturma API'si: İlk adım, PDF belgesini oluşturacak bir arka uç API'si yaratmaktır. IronPDF yalnızca sunucu tarafında çalıştığı için, bir kullanıcının PDF oluşturmak istediğinde çağırabileceği bir API oluşturmamız gerekiyor. Yolun içinde pages/api/pdf.js bir dosya oluşturun ve aşağıdaki içeriği ekleyin.

IronPDF ayrica bir lisans anahtari gerektirir, onu lisans sayfasindan alabilir ve asagidaki koda yerlestirebilirsiniz:

// pages/api/pdf.js

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key goes here";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();
    console.error('data PDF:', data);
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
    res.send(data);
  } catch (error) {
    console.error('Error generating PDF:', error);
    res.status(500).end();
  }
}
// pages/api/pdf.js

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key goes here";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();
    console.error('data PDF:', data);
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
    res.send(data);
  } catch (error) {
    console.error('Error generating PDF:', error);
    res.status(500).end();
  }
}
JAVASCRIPT

Aşağıda, kullanıcı için PDF oluşturma sayfasını ayarlayan index.js kodu yer almaktadır:

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState } from "react";
import Linkify from 'react-linkify';

// Home component for link conversion and PDF generation
export default function Home() {
  const [text, setText] = useState("");

  // Function to generate PDF from entered URL
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  // Handle changes in the input text field
  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Linkify and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter URL to Linkify and Convert to PDF:</span>{" "}
        </p>
        <input type="text" value={text} onChange={handleChange} />
        <Linkify properties={{ target: '_blank' }}>
          <p>
            Clickable links from input text: {text}
          </p>
        </Linkify>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF From Link
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}
import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState } from "react";
import Linkify from 'react-linkify';

// Home component for link conversion and PDF generation
export default function Home() {
  const [text, setText] = useState("");

  // Function to generate PDF from entered URL
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  // Handle changes in the input text field
  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Linkify and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter URL to Linkify and Convert to PDF:</span>{" "}
        </p>
        <input type="text" value={text} onChange={handleChange} />
        <Linkify properties={{ target: '_blank' }}>
          <p>
            Clickable links from input text: {text}
          </p>
        </Linkify>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF From Link
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}
JAVASCRIPT

Kod Açıklaması

  1. Linkify Entegrasyonu:

    • Linkify bileşeni, bağlantı metnini içeren HTML etiketini çevreler.
    • Metinde algilanan herhangi bir URL veya e-postayi otomatik olarak tiklanabilir bir linke dönüştürur.
  2. PDF Oluşturma:
    • 'PDF Oluştur' dugmesine tiklandiginda, uygulama bir URL'den PDF oluşturmak icin arka uc API'sini cagiri.
    • Bu API URL'den web sayfasini alir ve indirilabilir bir PDF belgesine dönüştürur.

Çıktı PDF Oluşturma Sayfasi

linkify-react (Nasıl Calisir: Geliştiriciler Icin Bir Rehber): Sekil 2 - PDF oluşturma icin cikti sayfası

Sonuc Cikti PDF

linkify-react (Nasıl Calisir: Geliştiriciler Icin Bir Rehber): Sekil 3 - 'PDF Oluştur' dugmesine tiklamadan cikti PDF

IronPDF Lisansı

Lisans Anahtarini buraya yerlesin:

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your license key here";
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your license key here";
JAVASCRIPT

Sonuç

React Linkify, React uygulamalarinda metin iceriginde tiklanabilir linkler oluşturma sürecini basitlestirir. URL'ler, e-posta adresleri ve diğer linkleri tiklanabilir hiperlinklere dönüştürup algilamayi otomatiklestirerek, Linkify gelisme is akisini duzenler ve kullanıcı deneyimini arttirir. Kolay entegrasyonu, ozellestirme seçenekleri ve guclu islevselligi ile React Linkify, cekici ve kullanıcı dostu arayuzler oluşturmaya calisan React geliştiricileri icin degerli bir aracdir.

Bunun da otesinde, IronPDF, kapsaml, PDF oluşturma, manipule etme ve duzenleme yeteneklerini uygulamalarina entegre etmek isteyen geliştiriciler icin uyarlanmis saglam bir Node.js kutuphanesi oldugunu kanitlamistir. Çeşitli formatlari PDF'ye dönüştürme, mevcut PDF belgelerini düzenleme ve PDF guvenligini yonetme destegi ile IronPDF, Node.js ortaminda PDF dosyalarini programatik olarak oluşturma ve ozellestirmek icin çok yonlu bir arac kiti sunar. Özellikleri, basit belge oluştuṙmadan karmaşık belgê yonetim ̂gorev̂lerine kadar genis bir̂ ihtîyacâ uygun̂dur̂, Node.js gelı̇ştîır̂iĉiler̂inin̂ PDF'̂lerlê calışması̂ îçi̇n̂ dêger̂li bir̂ araĉ yap̂ar̂.

Darrius Serrant
Darrius Serrant
  Mühendislik takımıyla şimdi sohbet edin
Tam Yığın Yazılım Mühendisi (WebOps)

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimleri lisans derecesine sahiptir ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışmaktadır. Küçük yaşlardan itibaren kodlamaya ilgi duyan Darrius, bilişimi hem gizemli hem de erişilebilir buldu ve onu yaratıcılık ve problem çö...

Daha Fazlasını Oku

İlgili Makaleler

30 günlük deneme → Tam ürün. Sınırlama yok. Kart gerekmez. Ücretsiz Deneme Başlat

Iron Destek Ekibi

Haftanın 5 günü, 24 saat çevrimiçiyiz.
Sohbet
E-posta
Beni Ara