React.js Uygulamanıza Pop-Up Efektleri Ekleyin

Pop-up'lar, kullanıcının dikkatini çekmenin ve önemli bilgileri göstermenin harika bir yoludur. Bunları onay mesajları ve hata mesajları gibi şeyler için kullanabilirsiniz. Veya bunları yalnızca bir sayfadaki bir öğe hakkında ek bilgi göstermek için kullanabilirsiniz.

React'te açılır pencereler oluşturmanın iki yolu vardır: React kancalarını kullanmak veya harici bir modül kullanmak.

GÜNÜN YAPILAN VİDEOSU

React.js'de Pop-Up'lar Nasıl Oluşturulur

Öncelikle, basit bir tepki uygulaması oluşturun . Bundan sonra, iki yöntemden birini kullanarak bir açılır pencere ekleyebilirsiniz. React kancalarını veya harici bir modülü kullanabilirsiniz.

1. Tepki Kancalarını Kullanma

Kanca yaklaşımı daha basittir ve yalnızca birkaç satır kod gerektirir.

İlk olarak, açılır pencereyi açacak bir işlev oluşturmanız gerekir. Bu işlevi, açılır pencereyi görüntüleyecek bileşende tanımlayabilirsiniz.

Ardından, açılır pencere için bir durum değişkeni oluşturmak için useState kancasını kullanmanız gerekir. Açılır pencerenin açık olup olmayacağını belirlemek için bu durum değişkenini kullanabilirsiniz.

Son olarak, bileşeninize açılır pencereyi tetikleyecek bir düğme eklemeniz gerekir. Bu düğmeyi tıkladığınızda, durum değişkenini true olarak ayarlayın; bu, açılır pencerenin görünmesine neden olur.

Bu yaklaşımın koduna bir göz atın:

import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Pop-up 
      </button> 
  
      {isOpen && ( 
       <div> 
        <div> 
          This is the content of the pop-up. 
        </div> 
        <button onClick={() => setIsOpen(false)}> 
           Pop-up 
        </button> 
       </div> 
      )} 
    </div> 
  ); 
} 
  
export default Example;

İlk olarak, bu kod, useState kancasını çekirdek tepki kitaplığından içe aktarır. Ardından, Örnek işlevi isOpen adlı bir durum değişkeni oluşturmak için useState kancasını kullanır. Bu durum değişkeni, açılır pencerenin açık olup olmayacağını belirler.

Ardından, açılır pencereyi tetikleyecek bileşene bir düğme ekleyin. Bu düğmeyi tıkladığınızda, durum değişkeni true olarak ayarlanır ve bu, açılır pencerenin görünmesine neden olur.

Son olarak, açılır pencereyi kapatacak bileşene bir düğme ekleyin. Bu düğmeyi tıkladığınızda, durum değişkeni false olarak ayarlanır ve bu, açılır pencerenin kaybolmasına neden olur.

tek düğme ve açılan açılır pencere ile tepki sayfası

2. Harici Modül Kullanma

Harici bir modül kullanarak React'te açılır pencereler de oluşturabilirsiniz. Bu amaçla kullanabileceğiniz birçok modül mevcuttur.

Popüler bir modül tepki-modudur. tepki-modal, React'te kalıcı diyaloglar oluşturmanıza izin veren basit ve hafif bir modüldür.

Reaksiyon modunu kullanmak için önce npm kullanarak kurmanız gerekir:

npm install react-modal

React-modal'ı yükledikten sonra, onu React bileşeninize aktarabilirsiniz:

import ReactModal from 'react-modal'; 
import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={setIsOpen}>Open Modal</button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

Bu kodda, hala React kancalarını kullanıyorsunuz, ancak tepki-mod modülü ile. React-modal modülü ile açılır pencereye daha fazla işlevsellik ekleyebilirsiniz. Gördüğünüz gibi, kod önceki yaklaşıma çok benzer. Tek fark, artık kendinizinkini oluşturmak yerine ReactModal bileşenini react-modal'dan kullanmanızdır.

İlk önce, tepki mod modülünü içe aktarmanız gerekir. Ardından, açılır pencerenizin içeriğini sarmak için ReactModal bileşenini kullanırsınız. Modalın açık olup olmayacağını belirlemek için isOpen prop'u kullanın.

windows 10 hyper-v vs sanal kutu

Açılır pencerenizi oluşturduktan sonra, ona ek özellikler eklemek isteyebilirsiniz. Örneğin, kullanıcı bunun dışına tıkladığında açılır pencereyi kapatmak isteyebilirsiniz.

Bunu yapmak için, tepki-modal bileşeninin onRequest özelliğini kullanmanız gerekir. Bu prop, değeri olarak bir fonksiyon alır. Bu işlev, kullanıcı modun dışına tıkladığında çalışır.

Örneğin, kullanıcı pencerenin dışına tıkladığında açılır pencereyi kapatmak için aşağıdaki kodu kullanırsınız:

import React, { useState } from 'react'; 
import ReactModal from 'react-modal'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Modal 
      </button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
        onRequest={() => setIsOpen(false)} 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

onRequest desteğine ilettiğimiz işlev, isOpen durum değişkenini false olarak ayarlar. Bu, modun kapanmasına neden olacaktır.

Ayrıca, daha fazla özelleştirmek için ReactModal bileşenine başka aksesuarlar da ekleyebilirsiniz. Tam bir donanım listesi için, tepki-modal belgelerine göz atabilirsiniz.

Açılır Pencerelerde Stil Ekleme

Açılır pencerenizi oluşturduktan sonra, ona biraz stil eklemek isteyebilirsiniz. React bileşenlerine stil vermenin birçok yolu vardır, ancak biz satır içi stillere odaklanacağız.

Satır içi stiller, doğrudan bir React bileşenine ekleyebileceğiniz stillerdir. Satır içi stiller eklemek için style özelliğini kullanmanız gerekir. Bu özellik, değeri olarak bir nesneyi alır, burada anahtarlar stil özellikleridir ve değerler stil değerleridir.

Örneğin, bir açılır pencereye beyaz arka plan rengi ve 500 piksel genişlik eklemek için aşağıdaki kodu kullanırsınız:

import React from 'react'; 
  
function Example() { 
  return ( 
    <div style={{ backgroundColor: 'white', width: '500px' }}> 
      This is the content of the pop-up. 
    </div> 
  ); 
} 
  
export default Example;

Bu kodda, style özelliğini, backgroundColor ve width özellikleriyle div öğesine eklersiniz. Ayrıca tepki uygulamasında Tailwind CSS kullanın pop-up'larınızı şekillendirmek için.

Pop-up'larla Dönüşüm Oranını Artırın

Pop-up'lar, kullanıcıya önemli bilgiler göstererek dönüşüm oranlarını artırmaya yardımcı olabilir. Örneğin, bir indirim kodunu veya özel bir teklifi görüntülemek için bir açılır pencere kullanabilirsiniz. Bülteniniz için e-posta adresleri toplamak için bir açılır pencere de kullanabilirsiniz. React uygulamanıza bir açılır pencere eklemek, dönüşüm oranlarını artırmanın harika bir yoludur.

Ayrıca React uygulamanızı GitHub sayfalarında ücretsiz olarak kolayca dağıtabilirsiniz.