react-modal_module v0.1.4

react-modal_module for React

react-modal_module is a complete modal for the react project for the web.

Installation

    npm i react-modal_module

Usage

Import Modal component and the hook useModal from "react-modal_module" where you want to use this.

import React from "react";
import Modal, { useModal } from "react-modal_module";

function App() {
  const [showModal, setShowModal, showSpinner, setShowSpinner] = useModal();
  return (
    <Modal showModal={showModal} setShowModal={setShowModal}>
      <p>I am a modal</p>
    </Modal>
  );
}

In your modal Modal component you can personalize your content to be able to do that we pass the content through a spread operator in the props and we use the props like a children

function Modal({ ...props }) {
  return <div>{props.children}</div>;
}

import React from "react";
import Modal, { useModal } from "react-modal_module";

function App() {
  const [showModal, setShowModal, showSpinner, setShowSpinner] = useModal();
  return (
    <Modal showModal={showModal} setShowModal={setShowModal}>
      <form className="form">
        <label htmlFor="username" />
        <input type="text" id="username" className="form__input" />
        <label htmlFor="lastName" />
        <input type="text" id="lastname" className="form__input" />
        <button type="submit" className="form__button">
          Submit
        </button>
      </form>
    </Modal>
  );
}

Modal is basically responsive, scroll bar is appear if the text is very long

Modal Css

Modal have a basic css page if you want to use

import "react-modal_module/dist/components/Modal.css";

or if you want personalize it you can make your own css page

import "react-modal_module/dist/components/Modal.css"
import "../example/custom.css

You can find all class using on the default css here

• Modal.css

Props

All of native react-modal_module props can be passed to the component.

Defaults Props

showModal and setShowModal is using for make a modal appear

function App() {
  const [showModal, setShowModal, showSpinner, setShowSpinner] = useModal();
  return (
    <div>
      <button onClick={setShowModal}>Open Modal</button>
      <Modal
        showModal={showModal}
        setShowModal={setShowModal}
        showSpinner={showSpinner}
        setShowSpinner={setShowSpinner}
      >
        <p>I am a modal</p>
      </Modal>
    </div>
}

showSpinner and SetShowSpinner is using for make a spinner appear when they have an async function

function App() {
  const [showModal, setShowModal, showSpinner, setShowSpinner] = useModal();

  const waitFor = (ms) => new Promise((r) => setTimeout(r, ms));
  const handleClick = async (event) => {
    setShowSpinner();
    await waitFor(2000);
    setShowModal();
  };

  return (
    <div>
      <button onClick={handleClick}>Open Modal</button>
      <Modal
        showModal={showModal}
        setShowModal={setShowModal}
        showSpinner={showSpinner}
        setShowSpinner={setShowSpinner}
      >
        <p>I am a modal</p>
      </Modal>
    </div>
  );
}

Optionnal props

unLockClose?: boolean

If unLockClose is true you can't close the modal with click and escape button

<Modal
  showModal={showModal}
  setShowModal={setShowModal}
  showSpinner={showSpinner}
  setShowSpinner={setShowSpinner}
  unLockClose={true}
>
  <p className="text__color">Content</p>
</Modal>

showClose?: boolean

For hiding the close button.

<Modal showModal={showModal} setShowModal={setShowModal} showClose={false}>
  <p className="text__color">Content</p>
</Modal>

showFade?: Boolean

You can add a fade effect, the fade effect prevents visibility of the spinner

To customize your fade effect you must change the css content properties in your css custom file

//default className

.modal__fade-in 
.modal__fade-out
@keyframes: fadeInOpacity
@keyframes: fadeOutOpacity

<Modal showModal={showModal} setShowModal={setShowModal} showFade={true}>
  <p>Content</p>
</Modal>

icon?: string

You can custom the close icon. By default the modal have four type of icon: "cross", "exclamation", "heart", "star". But if you want your one you just have to change css property on your custom css file. (default className: modal__close-btn)

//default className

.modal__close-btn

<Modal showModal={showModal} setShowModal={setShowModal} icon="cross">
  <p>Content</p>
</Modal>

default state of the props and default state in the hook useModal

  icon = "cross"
  unLockClose = true,
  showClose = true,
  showFade = false,
  ...props

const [isShowingModal, setIsShowingModal] = useState(false);
const [isShowingSpinner, setIsShowingSpinner] = useState(false);

Contribute

You want to contribute ?

Go there CONTRIBUTING.md

License

MIT