30-seconds-of-react React 30 seconds of React 30 seconds of React 30 seconds of React 30 seconds of React 30 seconds of React

Series of articles:

  • React 30 seconds: Render array data into lists and tables
  • React 30 Seconds learning: Make input fields, password visibility, slider components, drop-down selectors, check box components
  • React 30 seconds: Create multi-line text components that limit the number of characters and words
  • React 30 seconds Speed learning: Implement collapsible, infinite hierarchy tree components
  • React 30 Seconds: Make text components that automatically recognize links
  • React 30 Seconds To Learn: Make accordion components
  • React 30 Seconds Learning: Create a multicast component
  • React 30 Seconds Quick Learning: Make folding panel components
  • React 30 Seconds: Create a countdown component
  • React 30 seconds Quick Learning: Create file drag and drop components
  • React 30 Seconds Speed Learning: Make modal box components
  • React 30 Seconds Learning: Create a star rating component
  • React 30 Seconds Learning: Make TAB components

Modal components

Modal components that can be controlled by events.

To use this component, you import Modal once, and then display it by passing a Boolean value to the isVisible property.

  • Use object deconstruction to set default values for some properties of a modal component.
  • definekeydownHandlerMethod, which handles all keyboard events, can be used to schedule actions according to your needs (for example, when pressed)EscWhen the mode is closed. * useReact.useEffect()Hook to add or removekeydownEvent listener, which callskeydownHandler. * useisVisibleProps to determine whether the modes should be displayed. * Use CSS to set and position modal components.

Style:

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right:0;
  width: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.25);
  animation-name: appear;
  animation-duration: 300ms;
}

.modal-dialog{
  width: 100%;
  max-width: 550px;
  background: white;
  position: relative;
  margin: 0 20px;
  max-height: calc(100vh - 40px);
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow:hidden;
  box-shadow: 0 4px 8px 0 rgba,0,0,0.2 (0),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4 s;
  animation-name: slide-in;
  animation-duration: 0.5 s;
}

.modal-header..modal-footer{
  display: flex;
  align-items: center;
  padding: 1rem;
}
.modal-header{
  border-bottom: 1px solid #dbdbdb;
  justify-content: space-between;
}
.modal-footer{
  border-top: 1px solid #dbdbdb;
  justify-content: flex-end;
}
.modal-close{
  cursor: pointer;
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
}
.modal-body{
  overflow: auto;
}
.modal-content{
  padding: 1rem;
}

@keyframes appear {
  from {opacity: 0; }to {opacity: 1;}
}
@keyframes slide-in {
  from {transform: translateY(-150px); }to { transform: translateY(0);}
}
Copy the code

Components:

import React from "react";
import styles from "./Modal.css";

function Modal({ isVisible = false, title, content, footer, onClose }) {
  React.useEffect((a)= > {
    // Listen on events
    document.addEventListener("keydown", keydownHandler);
    // Cancel the listener
    return (a)= > document.removeEventListener("keydown", keydownHandler);
  });

  function keydownHandler({ key }) {
    // Press Esc to close the modal box
    switch (key) {
      case "Escape":
        onClose();
        break;
      default:}}// Control mode box display
  return! isVisible ?null : (
    <div className={styles["modal"]} onClick={onClose}>
      <div
        className={styles["modal-dialog"]}
        onClick={e= > e.stopPropagation()}
      >
        <div className={styles["modal-header"]} >
          <h3 className={styles["modal-title"]} >{title}</h3>
          <span className={styles["modal-close"]} onClick={onClose}>
            &times;
          </span>
        </div>
        <div className={styles["modal-body"]} >
          <div className={styles["modal-content"]} >{content}</div>
        </div>
        {footer && <div className={styles["modal-footer"]} >{footer}</div>}
      </div>
    </div>
  );
}
Copy the code

example


// Add the component to the render function
function App() {
  const [isModal, setModal] = React.useState(false);

  return(< react. Fragment> {/* Button display Modal box */} <button onClick={() => setModal(true)}> Display Modal box </button> <Modal isVisible={isModal} Title = "title" content = {< / p > < p > text} footer = {< button onClick = {() = > setModal (false)} > close the modal dialog < / button >} onClose = {() = > setModal(false)} /> </React.Fragment> ); } export default function() { return <App />; }Copy the code
  • The sample code
  • Running effect