tui-react-bib/src/component/modal/TuiReactModal.jsx

J'ai créé et publié une bibliothèque React qui contient un composant de modal. Ce composant est similaire à ceux que l'on trouve dans les anciens projets basés sur jQuery, mais écrit dans le style moderne de React. L'objectif est de permettre à d'autres d

import PropTypes from 'prop-types';
import './TuiReactModal.scss';
import { useMemo, useState } from 'react';


const TuiReactModal = ({ visibility, message }) => {

  const [hidden, setHidden] = useState('hidden');
  useMemo(() => {
    if (visibility) {
      setHidden('');
      return true;
    }
    setHidden('hidden');
    return visibility;
  }, [visibility]);

  return (
    <div className={`modal ${hidden}`}>
      <div className="modal-container">
        <h4 className="modal-detail">{message}</h4>
        <button
          onClick={() => {
            if (visibility) setHidden('hidden');
          }}
          type="button"
          className="modal-button-variant-1"
        >
          &#10005;
        </button>
      </div>
    </div>
  );
};

TuiReactModal.propTypes = {
  visibility: PropTypes.string.isRequired,
  message: PropTypes.string.isRequired,
};
export default TuiReactModal;