Føj pop-up-effekter til din React.js-app

Pop-ups er en fantastisk måde at fange din brugers opmærksomhed og vise vigtig information. Du kan bruge dem til ting som bekræftelsesmeddelelser og fejlmeddelelser. Eller du kan bare bruge dem til at vise ekstra information om et element på en side.

I React er der to måder at oprette pop-ups på: ved at bruge React hooks eller ved at bruge et eksternt modul.

MAKEUSE AF DAGENS VIDEO

Sådan opretter du pop-ups i React.js

Først, oprette en simpel reagere app . Derefter kan du tilføje en pop-up ved hjælp af en af to metoder. Du kan bruge React kroge eller et eksternt modul.

1. Brug af React Hooks

Hooks-tilgangen er enklere og kræver kun et par linjer kode.

Først skal du oprette en funktion, der åbner pop op-vinduet. Du kan definere denne funktion i den komponent, der viser pop op-vinduet.

Dernæst skal du bruge useState-krogen til at oprette en tilstandsvariabel til pop op-vinduet. Du kan bruge denne tilstandsvariabel til at bestemme, om pop op-vinduet skal være åbent eller ej.

Til sidst skal du tilføje en knap til din komponent, der udløser pop-up'et. Når du klikker på denne knap, skal du indstille tilstandsvariablen til sand, hvilket vil få pop op-vinduet til at vises.

Tag et kig på koden for denne tilgang:

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;

For det første importerer denne kode useState-krogen fra core-react-biblioteket. Derefter bruger eksempelfunktionen useState-hook til at oprette en tilstandsvariabel kaldet isOpen. Denne tilstandsvariabel bestemmer, om pop op-vinduet skal være åbent eller ej.

Tilføj derefter en knap til den komponent, der udløser pop op-vinduet. Når du klikker på denne knap, indstilles tilstandsvariablen til sand, hvilket vil få pop op-vinduet frem.

Tilføj endelig en knap til komponenten, der lukker pop op-vinduet. Når du klikker på denne knap, indstilles tilstandsvariablen til falsk, hvilket vil få pop op-vinduet til at forsvinde.

2. Brug af et eksternt modul

Du kan også oprette pop-ups i React ved hjælp af et eksternt modul. Der er mange moduler tilgængelige, som du kan bruge til dette formål.

Et populært modul er react-modal. react-modal er et enkelt og letvægtsmodul, der giver dig mulighed for at oprette modale dialoger i React.

For at bruge react-modal skal du først installere det ved hjælp af npm:

npm install react-modal

Når du har installeret react-modal, kan du importere den til 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 denne kode bruger du stadig React-krogene, men med det react-modale modul. Med det react-modale modul kan du tilføje mere funktionalitet til pop op-vinduet. Som du kan se, er koden meget lig den tidligere tilgang. Den eneste forskel er, at du nu bruger ReactModal-komponenten fra react-modal i stedet for at oprette din egen.

Først skal du importere det react-modale modul. Derefter bruger du ReactModal-komponenten til at pakke indholdet af din pop-up. Brug isOpen prop til at bestemme, om modalen skal være åben eller ej.

Når du har oprettet din pop-up, vil du måske tilføje yderligere funktioner til den. For eksempel vil du måske lukke pop op-vinduet, når brugeren klikker uden for det.

For at gøre dette skal du bruge onRequest-propen for den react-modale komponent. Denne rekvisit tager en funktion som sin værdi. Denne funktion vil køre, når brugeren klikker uden for modalen.

For eksempel, for at lukke pop op-vinduet, når brugeren klikker uden for det, skal du bruge følgende kode:

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 overfører til onRequest-prop, sætter simpelthen isOpen-tilstandsvariablen til false. Dette vil få modalen til at lukke.

Du kan også tilføje andre rekvisitter til ReactModal-komponenten for at tilpasse den yderligere. For en komplet liste over rekvisitter kan du tjekke dokumentationen til reaktionsmodaliteten.

Tilføjelse af styling i pop-ups

Når du har oprettet din pop-up, vil du måske tilføje lidt styling til den. Der er mange måder at style React-komponenter på, men vi vil fokusere på inline-stile.

Inline-stile er stilarter, som du kan tilføje direkte til en React-komponent. For at tilføje indlejrede stilarter skal du bruge egenskaben stil. Denne egenskab tager et objekt som dets værdi, hvor nøglerne er stilegenskaberne og værdierne er stilværdierne.

er ring kompatibel med google home

For at tilføje en hvid baggrundsfarve og en bredde på 500px til en pop-up, skal du bruge følgende kode:

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 denne kode tilføjer du stilegenskaben til div-elementet med egenskaberne for baggrundsfarve og bredde. Du kan også brug Tailwind CSS i react app for at style dine popups.

Øg konverteringsfrekvensen med pop-ups

Pop-ups kan hjælpe med at øge konverteringsraterne ved at vise vigtig information til brugeren. Du kan for eksempel bruge en pop-up til at vise en rabatkode eller et særtilbud. Du kan også bruge en pop-up til at indsamle e-mailadresser til dit nyhedsbrev. Tilføjelse af en pop-up til din React-app er en fantastisk måde at øge konverteringsraterne på.

Du kan også nemt implementere din React-applikation gratis på GitHub-sider.