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 apenas 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.

Como criar pop-ups em React.js

Primeiro, criar 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 nesse 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:

importar Reagir, { useState } de 'reagir';
funçãoExemplo() {
const [isOpen, setIsOpen] = useState(falso);
retornar (
<div>
<botão onClick={() => setIsOpen (verdadeiro)}>
 Abrir pop-up
</button>
{está aberto && (
<div>
<div>
 Esse é o conteúdo do pop-up.
</div>
<botão onClick={() => setIsOpen (falso)}>
 Fechar pop-up
</button>
</div>
 )}
</div>
 );
}
exportarpadrão Exemplo;

Primeiro, esse código importa o hook useState da biblioteca principal do react. Em seguida, a função Example usa o hook 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.

Em seguida, adicione um botão ao componente que acionará o pop-up. Ao clicar nesse botão, a variável de estado será definida como verdadeira, 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 nesse botão, a variável de estado será definida como falsa, o que fará com que o pop-up desapareça.

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 é 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:

npm instalar modal de reação

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

importar ReactModal de 'react-modal';
importar Reagir, { useState } de 'reagir';
funçãoExemplo() {
const [isOpen, setIsOpen] = useState(falso);
retornar (
<div>
<botão onClick={setIsOpen}>Modal Aberto</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Exemplo Modal"
>
 Esse é o conteúdo do modal.
</ReactModal>
</div>
 );
}
exportarpadrão Exemplo;

Neste código, você ainda está usando os hooks do React, mas com o módulo react-modal. Com o módulo react-modal, você pode adicionar mais funcionalidade 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 agrupar o conteúdo do seu pop-up. Use a propriedade isOpen para determinar se o modal deve ser aberto ou não.

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 propriedade onRequestClose do componente react-modal. Este 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:

importar Reagir, { useState } de 'reagir';
importar ReactModal de 'react-modal';
funçãoExemplo() {
const [isOpen, setIsOpen] = useState(falso);
retornar (
<div>
<botão onClick={() => setIsOpen (verdadeiro)}>
 Modal Aberto
</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Exemplo Modal"
 onRequestClose={() => setIsOpen(falso)}
>
 Esse é o conteúdo do modal.
</ReactModal>
</div>
 );
}
exportarpadrão Exemplo;

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

Você também pode adicionar outras props ao componente ReactModal para personalizá-lo ainda mais. Para obter uma lista completa de props, você pode verificar a documentação react-modal.

Adicionando estilo em pop-ups

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

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 assume 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:

importar Reagir de 'reagir';
funçãoExemplo() {
retornar (
<estilo div={{ backgroundColor: 'branco', largura: '500 px' }}>
 Esse é o conteúdo do pop-up.
</div>
 );
}
exportarpadrão Exemplo;

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 react para estilizar seus pop-ups.

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.