Adicione efeitos pop-up ao seu aplicativo React.js

Adicione efeitos pop-up ao seu aplicativo React.js

Os pop-ups são uma ótima maneira de chamar a atenção do usuário e exibir informações importantes. Você pode usá-los para coisas como mensagens de confirmação e mensagens de erro. Ou você pode simplesmente usá-los para mostrar informações extras sobre um elemento em uma página.





No React, existem duas maneiras de criar pop-ups: usando hooks do React ou usando um módulo externo.



MAKEUSEO VÍDEO DO DIA

Como criar pop-ups no React.js

Primeiro, crie um aplicativo de reação simples . Depois disso, você pode adicionar um pop-up usando um dos dois métodos. Você pode usar ganchos do React ou um módulo externo.





1. Usando ganchos de reação

A abordagem de ganchos é mais simples e requer apenas algumas linhas de código.

Primeiro, você precisa criar uma função que abrirá o pop-up. Você pode definir esta função no componente que exibirá o pop-up.



Em seguida, você precisa usar o gancho useState para criar uma variável de estado para o pop-up. Você pode usar essa variável de estado para determinar se o pop-up deve ser aberto ou não.

Por fim, você precisa adicionar um botão ao seu componente que acionará o pop-up. Ao clicar neste botão, defina a variável de estado como true, o que fará com que o pop-up apareça.



Dê uma olhada no código para esta abordagem:

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;

Primeiro, esse código importa o gancho useState da biblioteca principal de reação. Em seguida, a função Example usa o gancho useState para criar uma variável de estado chamada isOpen. Essa variável de estado determina se o pop-up deve ser aberto ou não.



este arquivo está aberto em outro programa

Em seguida, adicione um botão ao componente que acionará o pop-up. Ao clicar neste botão, a variável de estado será definida como true, o que fará com que o pop-up apareça.

Por fim, adicione um botão ao componente que fechará o pop-up. Ao clicar neste botão, a variável de estado será definida como false, o que fará com que o pop-up desapareça.

página de reação com um botão e pop-up aberto

2. Usando um módulo externo

Você também pode criar pop-ups no React usando um módulo externo. Existem muitos módulos disponíveis que você pode usar para essa finalidade.

Um módulo popular é o react-modal. react-modal é um módulo simples e leve que permite criar diálogos modais no React.

Para usar o react-modal, primeiro você precisa instalá-lo usando o npm:

o que é um cartão micro SD 
npm install react-modal

Depois de instalar o react-modal, você pode importá-lo para o seu componente React:

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;

Neste código, você ainda está usando os ganchos do React, mas com o módulo react-modal. Com o módulo react-modal, você pode adicionar mais funcionalidades ao pop-up. Como você pode ver, o código é muito semelhante à abordagem anterior. A única diferença é que agora você está usando o componente ReactModal do react-modal em vez de criar o seu próprio.

Primeiro, você precisa importar o módulo react-modal. Em seguida, você usa o componente ReactModal para encapsular o conteúdo do seu pop-up. Use a prop isOpen para determinar se o modal deve ser aberto ou não.

página de reação com um pop-up

Depois de criar seu pop-up, você pode adicionar recursos adicionais a ele. Por exemplo, você pode querer fechar o pop-up quando o usuário clicar fora dele.

Para fazer isso, você precisa usar a prop onRequest do componente react-modal. Esta prop recebe uma função como seu valor. Esta função será executada quando o usuário clicar fora do modal.

Por exemplo, para fechar o pop-up quando o usuário clicar fora dele, você usaria o seguinte código:

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;

A função que estamos passando para a prop onRequest simplesmente define a variável de estado isOpen como false. Isso fará com que o modal seja fechado.

Você também pode adicionar outros adereços ao componente ReactModal para personalizá-lo ainda mais. Para uma lista completa de adereços, você pode conferir a documentação do react-modal.

Adicionando estilo em pop-ups

Depois de criar seu pop-up, você pode adicionar algum estilo a ele. Existem muitas maneiras de estilizar os componentes do React, mas vamos nos concentrar nos estilos inline.

Estilos embutidos são estilos que você pode adicionar diretamente a um componente React. Para adicionar estilos embutidos, você precisa usar a propriedade style. Esta propriedade recebe um objeto como seu valor, onde as chaves são as propriedades de estilo e os valores são os valores de estilo.

Por exemplo, para adicionar uma cor de fundo branca e uma largura de 500px a um pop-up, você usaria o seguinte código:

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;

Nesse código, você adiciona a propriedade style ao elemento div com as propriedades backgroundColor e width. Você também pode use Tailwind CSS no aplicativo de reação para estilizar seus pop-ups.

como fazer uma captura de tela no snapchat sem que eles saibam de 2020

Aumente a taxa de conversão com pop-ups

Os pop-ups podem ajudar a aumentar as taxas de conversão exibindo informações importantes para o usuário. Por exemplo, você pode usar um pop-up para exibir um código de desconto ou uma oferta especial. Você também pode usar um pop-up para coletar endereços de e-mail para seu boletim informativo. Adicionar um pop-up ao seu aplicativo React é uma ótima maneira de aumentar as taxas de conversão.

Você também pode implantar facilmente seu aplicativo React gratuitamente nas páginas do GitHub.