The Modal component is used to show content on top of an overlay. It blocks any interaction with the page — until the overlay is clicked, or a close action is triggered.
yarn add @malcodeman/react-modal
# or
npm install --save @malcodeman/react-modal
import React from "react";
import { Modal } from "@malcodeman/react-modal";
function App() {
const [isOpen, setIsOpen] = React.useState(false);
function onClick() {
setIsOpen(!isOpen);
}
function onClose() {
setIsOpen(false);
}
return (
<>
<button onClick={onClick}>Trigger Modal</button>
<Modal isOpen={isOpen} onClose={onClose}>
<div>Modal</div>
</Modal>
</>
);
}
export default App;