Pular para o conteúdo principal

LinkPreview

Base​

Utilize o componente LinkPreview para exibir uma prévia do conteúdo de determinada URL.

Informação

Internamente, o componente LinkPreview é renderizado como um link convencional (<a>), presumindo-se que a url fornecida aponte para um endereço externo. Por esse motivo, as propriedades target e rel recebem, por padrão, os valores "_blank" e "noreferrer", respectivamente.

Busca customizada e CORS​

Utilize a propriedade fetcher para definir um mecanismo de obtenção dos dados associados à url. Essa propriedade deve ser uma função assíncrona que recebe a url como parâmetro e retorna um objeto com os seguintes atributos:

  • title: O título associado ao conteúdo da url
  • description: A descrição associada ao conteúdo da url
  • imageSrc: O endereço da imagem associada ao conteúdo da url

Esta propriedade possui um valor padrão, disponível na constante LinkPreview.fetcher, que realiza essa busca da seguinte forma:

  • title: Retorna o conteúdo do elemento <title>, caso não esteja presente, será retornado a própria url
  • description: Retornar o valor do atributo content do elemento <meta name="description"> se disponível
  • imageSrc: Retorna o valor do atributo content do elemento <meta property="og:image"> se disponível

Entretanto, devido às políticas de CORS (Cross-Origin Resource Sharing) aplicadas pela maioria dos navegadores, esse mecanismo só funcionará corretamente para URLs do mesmo domínio da página onde o componente estiver sendo renderizado. Para domínios externos, as informações não poderão ser acessadas e apenas o endereço da url será exibido.

Para contornar as restrições de CORS, recomenda-se implementar uma solução no servidor (como um proxy ou uma API HTTP) e, a partir dela, fornecer um fetcher customizado ao componente.

Título, descrição e imagem customizados​

Utilize as propriedades title, description e imageSrc para customizar o título, a descrição e o caminho da imagem, respectivamente.

Informação

Se forem passadas, estas propriedades serão sempre utilizadas mesmo que o fetcher retorne valores para seus atributos equivalentes.

Se as três propriedades forem definidas, o fetcher não será executado e o componente será renderizado diretamente, sem carregamento ou busca prévia.

Feedback​

Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.