Criando PDFs com React-PDF

Alisson Ramon — Sun, 21 Apr 2024 20:24:13 +0000

Há um tempo atrás, uma task caiu no meu colo: criar um relatório dinâmico em PDF. Nunca havia feito algo do tipo antes e, na verdade, naquele momento, eu sequer sabia que era possível realizar essa tarefa com programação. Foi um desafio e tanto! Pesquisei bastante, li diversas documentações, mas consegui concluir minha task com êxito. Agora, trago este guia prático para você, para que também possa criar seus próprios PDFs dinâmicos de forma eficiente e com sucesso.

Passo 1: Configuração do Projeto:

Antes de começar, certifique-se de ter um projeto React configurado. Se você ainda não tem um projeto React, pode criar um novo utilizando o Vite.

npm create vite@latest meu-projeto

Em seguida, instale a biblioteca React-PDF (já tem suporte para TS):
npm install @react-pdf/renderer

Passo 2: Estrutura do PDF:

O React-PDF utiliza a mesma sintaxe do React para criar elementos PDF, porém ele conta com elementos da própria biblioteca para a montagem do arquivo:

import React from 'react';
import { Document, Page, Text } from '@react-pdf/renderer';

const MyDocument = () => (
  <Document>
    <Page size={'A4'}>
      <Text>Olá, Mundo!</Text>
    </Page>
  </Document>
);

export default MyDocument;

Passo 3: Estilo e Personalização:

Assim como no React, você pode estilizar seus elementos PDF com CSS. O React-PDF traz também o seu próprio StyleSheet, que facilita a organização e aplicação de estilos aos elementos do PDF.

import { StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
    page: {
      backgroundColor: '#fff',
      padding: 20,
      fontSize: 12,
    },
    header: {
      padding: 10,
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      gap: 20,
      marginBottom: 20
    },
    image: {
      width: 50,
      height: 50
    }
});

Passo 4: Renderização do PDF:

Agora que você tem a estrutura do PDF, é hora de renderizá-lo. Você pode fazer isso criando um modal e utilizar o PDFViewer fornecido pelo React-PDF, neste exemplo usei o Material-ui para me ajudar com o modal:

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Modal from '@mui/material/Modal';
import { PdfTemplate } from '../PdfTemplate';
import { PDFViewer } from '@react-pdf/renderer';
import { useMarketList } from '../../hooks/useMarketList';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '80%',
  height: '90%',
  boxShadow: 24,

};

export function ModalPdf() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(true);

  const handleClose = () => setOpen(false);

  const { items } = useMarketList()

  return (
    <div>
      <Button onClick={handleOpen}>Gerar lista</Button>
      <Modal
        open={open}
        onClose={handleClose}
      >
        <Box sx={style}>
          <PDFViewer width={'100%'} height={'100%'} >
            <PdfTemplate items={items} />
          </PDFViewer>
        </Box>
      </Modal>
    </div>
  );
}

Conclusão:

Com esses passos simples, você poderá criar seus próprios PDFs dinâmicos diretamente do seu aplicativo React, assim como eu fiz após enfrentar esse desafio.

Caso tenha interesse, vou disponibilizar o link do projeto que fiz para embasar esse texto.
Repositório no GitHub
LinkedIn

Dicas Práticas de Acessibilidade com React JS

Alisson Ramon — Sun, 10 Mar 2024 16:48:39 +0000

Primeiro, oque é acessibilidade web?
A acessibilidade na web se refere à prática de garantir que os sites e aplicativos da web sejam acessíveis e utilizáveis por todas as pessoas, independentemente de suas capacidades físicas ou cognitivas. Isso inclui tornar o conteúdo acessível para pessoas com deficiências visuais, auditivas, motoras, cognitivas ou outras.

Estrutura seântica:
Consiste na organização semântica. Com o advento do HTML 5, a web deixou de ser um amontoado de containers <div> genéricos e passou a atribuir sentido com o auxílio de tags como <header>, <footer>, <nav>, entre outras. Esses elementos não apenas contribuem para a acessibilidade, mas também facilitam a indexação pelos mecanismos de busca.

Aqui estão alguns desses elementos e seus propósitos:

<header>: agrupa elementos no topo da página;
<nav>: define a área de navegação;
<section>: delimita uma seção genérica da página;
<aside>: apresenta conteúdo complementar;
<footer>: fornece informações de rodapé.

Além disso, <strong> e <em> são usados para dar ênfase ao conteúdo, ao contrário dos elementos <b> e <i>, que não possuem peso semântico.

Botões semânticos:

É comum encontrarmos aplicações que utilizam elementos genéricos para se comportarem como botões, como no exemplo a seguir:

<span onClick={handleSubmit} className='btn'>Enviar respostas</span>

Existem alguns motivos para essa prática, como a facilidade na estilização, evitando a necessidade de zerar bordas e paddings que já são aplicados automaticamente à tag button. No entanto, essa abordagem cria uma barreira de acessibilidade significativa, já que os usuários não conseguem acessar o elemento pelo teclado, e ele só se comporta como um botão quando clicado.

Aqui estão algumas dicas para contornar essa situação:
1- Para zerar todas as estilizações do <button> e manter a acessibilidade via teclado, podemos usar a propriedade all: unset;

.btn {
  all: unset;
  cursor: pointer;
  padding: 8px 16px;
  background-color: #6ede45;
}

2- Se, por algum motivo, ainda quisermos utilizar um <span> ou <div> como um botão, podemos usar o atributo role para mudar sua semântica e fazê-lo se comportar como um botão

<span role='button' className='btn'>Enviar respostas</span>

Essas práticas ajudam a garantir que os botões sejam acessíveis e utilizáveis por todos os usuários, incluindo aqueles que dependem da navegação pelo teclado.

Outra barreira de acesso é limitar que o botão seja ativo apenas ao clicar. Isso pode ser problemático para pessoas com limitações motoras que têm dificuldades no manuseio do mouse ou que navegam apenas pelo teclado. Esses usuários podem enfrentar dificuldades para interagir com o botão e realizar ações importantes em seu aplicativo ou site.

<button
      onClick={handleClick}
      onKeyPress={handleKeyPress}
    >
      Avançar
    </button>

Cores:

As cores desempenham um papel fundamental na construção de uma página web, mas devem ser usadas com cuidado. Pessoas com baixa visão ou daltonismo podem ter dificuldades em distinguir certas cores ou identificar um contraste inadequado.

É importante garantir um bom contraste entre o texto e o fundo, e para isso podemos usar ferramentas como contrast checker. Um site muito útil que frequentemente é utilizado para avaliar o contraste é o Coolors Contrast Checker (https://coolors.co/contrast-checker). Com essa ferramenta, é possível parametrizar o quão bom está o contraste em sua página da web.

Outro ponto importante sobre o uso de cores é nunca usar somente cores para transmitir uma informação. Por exemplo, se um usuário deixar campos obrigatórios sem responder, é comum que o input automaticamente fique vermelho para indicar um erro. No entanto, para uma pessoa com limitações visuais, isso pode não ser útil.

Portanto, é fundamental incluir informações adicionais, como textos descritivos ou mensagens de erro, para indicar claramente ao usuário o motivo pelo qual algo está errado. Em vez de depender apenas da cor vermelha para indicar um erro, é importante fornecer uma mensagem explicativa que indique o problema e forneça orientações sobre como corrigi-lo.

<form onSubmit={handleSubmit}>
      <label htmlFor="email">Email:</label>
      <input
        type="email"
        id="email"
        name="email"
        value={email}
        onChange={handleInputChange}
        required
      />
      {emailError && 
        <span style={{ color: 'red' }}>
          Por favor, preencha um email válido.
        </span>
      }
      <button type="submit">Enviar</button>
    </form>

Redimensionar Textos:

O design responsivo tem uma relação forte com a acessibilidade. Usuários com baixa visão frequentemente precisam navegar com configurações de fontes maiores que o padrão do dispositivo. Portanto, devemos fazer uso de unidades de medidas relativas, em vez de unidades fixas como 'px'.

Ao utilizar unidades relativas, como 'em', 'rem' ou porcentagens, permitimos que os usuários redimensionem o texto conforme necessário, garantindo uma experiência de leitura confortável para todos os usuários, independentemente de suas configurações de acessibilidade.

Para converter um valor em pixels (px) para rem, você divide o valor em pixels pelo tamanho da fonte do elemento pai, que é definido em rem. Isso permite que o valor seja escalonado de acordo com a configuração de tamanho de fonte do usuário.

Se o tamanho da fonte do elemento pai estiver definido em rem, você pode fazer a conversão diretamente, por exemplo, se o tamanho da fonte do elemento pai for 16px, você dividirá o valor em pixels pelo tamanho da fonte base:

.example {
  font-size: 0.5625rem; /* 9px dividido por 16px (tamanho da fonte base) = 0.5625rem */
}

Mas para você não precisar fazer esse tipo de conta a todo momento, vou indicar uma extensão do vs code que uso, px to rem & rpx & vw (cssrem)

Quando digitamos, a extensão já oferece a substituição de px por rem, ou basta usar 'Ctrl + Espaço' para que a sugestão apareça automaticamente.

Conclusão:

Neste artigo, destacamos dicas simples para melhorar a acessibilidade de projetos web com React JS. Abordamos a importância da estrutura semântica em HTML, botões acessíveis, bom contraste de cores e mensagens de erro claras.

Ao implementar essas práticas, podemos criar uma web mais inclusiva para todos os usuários.

Bibliografia:

Ferraz, Reinaldo. Acessibilidade na Web. Editora Casa do Código, 16 de julho de 2020.
World Wide Web Consortium (W3C). Web Content Accessibility Guidelines (WCAG). Disponível em: https://www.w3.org/WAI/WCAG21/quickref/. Acesso em: 10/03/2024.

DEV Community: Alisson Ramon

Criando PDFs com React-PDF

Dicas Práticas de Acessibilidade com React JS