Code Challenge — 1

Criando um componente de modal usando React.js

Photo by Goran Ivos on Unsplash

Procurando praticar mais programação eu estarei publicando uma série de artigos explicando qual foi a solução desenvolvida e disponibilizando o código em cada desafio. E o desafio dessa semana é criar um componente de modal usando React.js com as seguintes condições:

• O conteúdo da modal precisa ser passado por props
• O usuário precisa conseguir fechar a modal através de um botão
• O texto do botão também precisa ser passado por props
• O usuário precisa conseguir fechar a modal ao clicar fora da caixa

Criando a estrutura do componente

A primeira coisa que eu vou fazer então vai ser criar um arquivo para o componente de modal.

// src/modal.js
const Modal = () => 
  return (
    <div>
      Modal
    </div>
  );
};

export default Modal;

Depois de criar o componente eu vou adicionar no App.js esse componente.

import "./styles.css";
import Modal from "./modal";

export default function App() {
  return (
    <div className="App">
      <Modal/>
    </div>
  );
}

Para atender aos requisitos do desafio, eu preciso criar um componente que receba as seguintes propriedades(props):

• Um texto que será exibido como conteúdo da modal
• Um texto para o botão

const Modal = (props) => {
  if (!props.isOpen) return null;

  const handleClickOutside = (e) => {
    if (e.target === e.currentTarget) {
      props.closeModal();
    }
  };
  return (
    <div className="modal-container" onClick={handleClickOutside}>
      <div className="modal-content">
        {props.content}
        <button onClick={props.closeModal}>{props.buttonLabel}</button>
      </div>
    </div>
  );
};

export default Modal;

Como as props são um objeto, eu posso fazer a desestruturação e selecionar as propriedades que eu vou precisar usar(além de tornar o código mais legível).

const Modal = ({ content, buttonLabel}) => {
  if (!isOpen) return null;

  const handleClickOutside = (e) => {
    if (e.target === e.currentTarget) {
      closeModal();
    }
  };
  return (
    <div className="modal-container" onClick={handleClickOutside}>
      <div className="modal-content">
        {content}
        <button onClick={closeModal}>{buttonLabel}</button>
      </div>
    </div>
  );
};

export default Modal;

E no App.js eu vou adicionar essas propriedades ao <Modal />

<Modal
  content={"Hey! Eu sou uma modal."}
  buttonLabel={"fechar"}
/>

Entendendo o CSS

Estrutura do HTML

Para essa modal eu criei uma estrutura com 2 divs, onde a div principal (modal-container) irá ser responsável por posicionar o elemento na tela e a div interna (modal-content) vai ser responsável por posicionar os elementos da modal.

CSS da div principal

Como a ideia dessa div é auxiliar no posicionamento da modal na tela, ela precisa ter o tamanho total da tela e não pode ser afetado pelo restante dos elementos do site. Para isso vamos usar a propriedade “position” e outras propriedades, mas ela é a mais importante.

Um elemento com “position:fixed” passa a ser posicionado de acordo com a janela de visualização, não seguindo mais o posicionamento herdado pelos elementos mais altos da hierarquia.

.modal-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
}

CSS da caixa de modal

Esse elemento tem um CSS simples então eu vou apenas liberar o código abaixo

.modal-content {
  display: flex;
  flex-direction: column;
  background-color: white;
  border: 1px solid black;
  padding: 30px;
  border-radius: 5%;
}

.modal-content button {
  border: none;
  margin-top: 5px;
  padding: 5px 0px;
}

Usando hooks para controlar a exibição da modal

Hooks são funções javascript que são encapsuladas pela biblioteca do React.js. Permitindo que você economize tempo no processo de desenvolvimento. E para o componente de modal, eu vou usar o hook de useState() para me ajudar a controlar quando a modal deve, ou não, ser exibida. Como eu não quero que a página abra com a modal aberta, eu já adicionei o valor padrão como false.

import "./styles.css";
import Modal from "./modal";
import { useState } from "react";

export default function App() {
  const [statusModal, setModalStatus] = useState(false);

  return (
    <div className="App">
      <Modal
        content={"Hey! Eu sou uma modal."}
        buttonLabel={"fechar"}
      />
    </div>
  );
}

Depois disso eu vou editar o componente de modal e adicionar duas propriedades: uma para gerenciar o status da modal e uma para que a modal possa ser fechada quando ela já estiver aberta. Dessa forma o componente da modal ficaria dessa forma:

// app.js
<Modal
  content={"Hey! Eu sou uma modal."}
  buttonLabel={"fechar"}
  isOpen={statusModal}
  closeModal={() => setModalStatus(false)}
/>

// modal.js
const Modal = ({ content, buttonLabel, isOpen, closeModal }) => {
  if (!isOpen) return null;

  return (
    <div className="modal-container" onClick={handleClickOutside}>
      <div className="modal-content">
        {content}
        <button onClick={closeModal}>{buttonLabel}</button>
      </div>
    </div>
  );
};

export default Modal;

A propriedade “isOpen” irá receber o valor do state declaro no App.js, como ele é um booleano caso o valor dele esteja como false ao invés de retornar o componente eu retorno null e a modal não é exibida na tela. Já a propriedade “closeModal” ela recebe a função closeModal() declarada no App.js, e quando essa função é executada ela altera o estado da Modal para false.

Espero que tenham gostado e que esse artigo possa te ajudar de alguma forma :)

O link para o código completo do componente: