DEV Community

Iago Angelim Costa Cavalcante
Iago Angelim Costa Cavalcante

Posted on

Criando componente de share com React/NextJS

O problema

Em um projeto em que eu me time estamos trabalhando enfrentamos o desafio de criar um componente para dar a possibilidade do usuário compartilhar algo que ele recebeu pelo email nas principais redes sociais (whatsapp, twitter, facebook e email) além da possibilidade de copiar o link exibido.

Solução

Para resolver este problema, começamos a pensar em como poderíamos pegar algo enviado por emai, abrir a página web daquele email e ativar o compartilhamento. A solução seria no link compartilhar que é recebido por email, adicionar uma query string indicando que será aberto o modal contendo os links de compartilhamento nas respectivas redes.

O link acima é representado no email pela seguinte tag

<a href="https://linkqualquer.com/nome/id?share=true">
  Compartilhe! ->
</a>
Enter fullscreen mode Exit fullscreen mode

Com isso estamos aptos a clicar no link e ser redirecionado para nossa página web que irá receber o parâmetro e realizar alguma ação.

Para verificar os parametros de rota, iremos utilizar hook roteador do NextJS que iremos importar da seguinte forma na nossa página:

import { useRouter } from 'next/router'
Enter fullscreen mode Exit fullscreen mode

E no componente iremos utilizar a variável query que o useRouter() disponibiliza para nós. Para executar a verificação no momento que entramos na página, iremos utilizar o useEffect e nosso componente ficará da seguinte forma:

const { query } = useRouter()

useEffect(() => {
    if (query.share == 'true') {

    }
  }, [query])

Enter fullscreen mode Exit fullscreen mode

Temos a verificação inicial se tem o parametro share na query string e com isso podemos implementar a lógica de exibição do modal e definir os dados que serão compartilhados. Mas vamos deixar essa primeira parte guardadinha e começar a trabalhar no nosso componente de share que será um modal.

** Obs: No projeto estamos utilizando o framework de UI chamado Tailwind **

Nosso componente irá receber apenas 3 propriedades, sendo elas a url do conteúdo que vamos compartilhar, o status que será responsável por mostrar ou não o modal e a action que define quando o modal será fechado.

Dentro do componente teremos duas funções onde uma será responável por tratar a ação dos botões de compartilhamento handleSharing() e a outra será responsável por copiar o link e jogar dentro do clipboard (mesma ação do ctrl + c) chamada de handleCopy.

Com nosso componente criado, vamos voltar a página onde tem o conteúdo a ser compartilhada e onde fazemos a verificação da query string.

Lá iremos implementar a importação do componente e quando que ele será exebido, nossa página ficará da seguinte forma:

Agora temos a lógica completa de exibição do modal ácima.

Conclusão

Inicialmente pode ser algo assustador para quem ta começando a desenvolver e ter que pensar em resolver esse problema, mas é mais simples do que parece, só precisamos relembrar de alguns conceitos e unificar nessa solução.

Poderíamos refatorar essa solução para algo um pouco melhor, porém nosso objetivo aqui era ser o mais didático possível.

Agradeço a leitura de todos(as).

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit