Lägg till popup-effekter i din React.js-app

Popup-fönster är ett utmärkt sätt att fånga din användares uppmärksamhet och visa viktig information. Du kan använda dem för saker som bekräftelsemeddelanden och felmeddelanden. Eller så kan du bara använda dem för att visa extra information om ett element på en sida.

I React finns det två sätt att skapa popup-fönster: med hjälp av React-krokar eller med en extern modul.

MAKEUSE AV DAGENS VIDEO

Hur man skapar popup-fönster i React.js

Först, skapa en enkel reagera app . Efter det kan du lägga till ett popup-fönster med någon av två metoder. Du kan använda React-krokar eller en extern modul.

1. Använda React Hooks

Hooks-metoden är enklare och kräver bara några rader kod.

Först måste du skapa en funktion som öppnar popup-fönstret. Du kan definiera denna funktion i komponenten som visar popup-fönstret.

Därefter måste du använda useState-kroken för att skapa en tillståndsvariabel för popup-fönstret. Du kan använda denna tillståndsvariabel för att avgöra om popup-fönstret ska vara öppet eller inte.

Slutligen måste du lägga till en knapp till din komponent som kommer att utlösa popup-fönstret. När du klickar på den här knappen ställer du in tillståndsvariabeln på sant, vilket gör att popup-fönstret visas.

Ta en titt på koden för detta tillvägagångssätt:

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;

Först importerar den här koden useState-kroken från core-react-biblioteket. Sedan använder Exempelfunktionen useState-kroken för att skapa en tillståndsvariabel som heter isOpen. Denna tillståndsvariabel bestämmer om popup-fönstret ska vara öppet eller inte.

gratis e -postklient för Windows 10

Lägg sedan till en knapp till komponenten som kommer att utlösa popup-fönstret. När du klickar på den här knappen kommer tillståndsvariabeln att ställas in på sant, vilket gör att popup-fönstret visas.

Lägg slutligen till en knapp till komponenten som stänger popup-fönstret. När du klickar på den här knappen kommer tillståndsvariabeln att ställas in på false, vilket gör att popup-fönstret försvinner.

2. Använda en extern modul

Du kan också skapa popup-fönster i React med hjälp av en extern modul. Det finns många moduler tillgängliga som du kan använda för detta ändamål.

En populär modul är react-modal. react-modal är en enkel och lätt modul som låter dig skapa modala dialoger i React.

För att använda react-modal måste du först installera den med npm:

npm install react-modal

När du har installerat react-modal kan du importera den till din React-komponent:

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;

I den här koden använder du fortfarande React-krokarna men med den react-modala modulen. Med react-modal-modulen kan du lägga till mer funktionalitet till popup-fönstret. Som du kan se är koden väldigt lik den tidigare metoden. Den enda skillnaden är att du nu använder ReactModal-komponenten från react-modal istället för att skapa din egen.

Först måste du importera react-modal-modulen. Sedan använder du ReactModal-komponenten för att omsluta innehållet i din popup. Använd isOpen-propet för att avgöra om modalen ska vara öppen eller inte.

När du har skapat ditt popup-fönster kanske du vill lägga till ytterligare funktioner till det. Du kanske till exempel vill stänga popup-fönstret när användaren klickar utanför det.

flytta musik från ipod till itunes

För att göra detta måste du använda onRequest-propet för react-modal-komponenten. Denna rekvisita tar en funktion som sitt värde. Denna funktion kommer att köras när användaren klickar utanför modalen.

Till exempel, för att stänga popup-fönstret när användaren klickar utanför det, skulle du använda följande kod:

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;

Funktionen som vi skickar till onRequest-propet ställer helt enkelt in tillståndsvariabeln isOpen till false. Detta kommer att göra att modalen stängs.

Du kan också lägga till andra rekvisita till ReactModal-komponenten för att anpassa den ytterligare. För en fullständig lista över rekvisita, kan du kolla in react-modal dokumentation.

Lägga till styling i popup-fönster

När du har skapat din popup kanske du vill lägga till lite styling till den. Det finns många sätt att styla React-komponenter, men vi kommer att fokusera på inline-stilar.

Inline-stilar är stilar som du kan lägga till direkt i en React-komponent. För att lägga till inline-stilar måste du använda stilegenskapen. Den här egenskapen tar ett objekt som dess värde, där nycklarna är stilegenskaperna och värdena är stilvärdena.

Till exempel, för att lägga till en bakgrundsfärg av vit och en bredd på 500px till ett popup-fönster, skulle du använda följande kod:

bästa övervakningstecken för nybörjare 2018

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;

I den här koden lägger du till stilegenskapen till div-elementet med egenskaperna backgroundColor och width. Du kan också använd Tailwind CSS i React-appen för att styla dina popup-fönster.

Öka omvandlingsfrekvensen med popup-fönster

Popup-fönster kan hjälpa till att öka konverteringsfrekvensen genom att visa viktig information för användaren. Du kan till exempel använda en popup för att visa en rabattkod eller ett specialerbjudande. Du kan också använda ett popup-fönster för att samla in e-postadresser till ditt nyhetsbrev. Att lägga till en popup i din React-app är ett bra sätt att öka konverteringsfrekvensen.

Du kan också enkelt distribuera din React-applikation gratis på GitHub-sidor.