modal-react-module v0.2.8
Modal-react-module for React
Modal-react-module is a complete modal for the react project for the web.
Installation
npm i modal-react-modal
Usage
Import Modal component and the hook useModal from "modal-react-module" where you want to use this.
import React from "react";
import Modal, { useModal } from "modal-react-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 "modal-react-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 "modal-react-module/dist/components/Modal.css";
or if you want personalize it you can make your own css page
import "modal-react-module/dist/components/Modal.css"
import "../example/custom.css
You can find all class using on the default css here
Props
All of native modal-react-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