@lani.ground/react-modal v2.1.5

react-modal

Modal components used in reactjs.

Demo

Example

Installation

npm install @lani.ground/react-modal

// or

yarn add @lani.ground/react-modal

Usage

// Components to be shown

interface PopupProps {
  closeModal: () => Promise<void>;
}

function Popup({closeModal}: PopupProps) {
  return (
    <div className="sample-modal-inner">
      <button
        type="button"
        onClick={closeModal}
      >
        Close Modal
      </button>
      <div>
        {/* content here */}
        {/*
          If you want to implement nested modals
          <Modal name="[unique name]"
            ...
          />
        */}
      </div>
    </div>
  );
}
  )
}

// using modal
import { Modal } from '@lani.ground/react-modal';
import '@lani.ground/react-modal/css';


export default function Component({
  closeModal,
}: {
  closeModal: () => Promise<void>;
}) {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  return (
    <>
      <button type="button" onClick={() => setIsOpen(true)}>Click Me!</button>
      <Modal
        name="modal"
        component={(closeModal) => <Popup closeModal={closeModal} />}
        onClose={() => {
          // callback here
          setIsOpen(false);
        }}
        dim="rgba(0, 0, 0, 0.8)"
        animation={{
          duration: 1000, // Modals cannot be re-opened or closed for the specified time.(ms)
          className: 'sample',
        }}
        centerMode
        isOpen={isOpen}
      />
    </>
  );
}

/* Examples of effects when modals appear and disappear */
.react-modal__container__enter.sample,
.react-modal__container__exit.sample {
  transition-duration: 1s;
}

.react-modal__container__enter {
  opacity: 1;
  transition-property: all;
  filter: blur(0);
}

.react-modal__container__enter .sample-modal-inner {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  transition: all 1s;
}

.react-modal__container__exit {
  opacity: 0;
  transition-property: all;
  filter: blur(1rem);
}

.react-modal__container__exit .sample-modal-inner {
  transform: scale(0);
  opacity: 0;
  transition: all 1s;
  filter: blur(1rem);
}

Isolating components by state

const [isVaild, setIsValid] = useState<boolean>(false);

<Modal
  component={(closeModal) => {
    if (isVaild) return <div>Vaild!</div>;
    return <div>Not vaild!</div>;
  }}
/>

If you want to show the modal as soon as the screen is rendered

<Modal
  {/* ... */}
  isOpen={true}
/>

// or

const [isOpen, setIsOpen] = useState<boolean>(true);

<Modal
  onClose={() => {
    setIsOpen(false);
  }}
  isOpen={isOpen}
/>

Props