React hook for showing modal windows
npm install --save react-modal-hook
Use ModalProvider
to provide modal context to your application components:
import React from "react";
import ReactDOM from "react-dom";
import { ModalProvider } from "react-modal-hook";
import App from "./App";
ReactDOM.render(
<ModalProvider>
<App />
</ModalProvider>,
document.getElementById("root")
);
``
Call `useModal` in your functional component:
``` tsx
import React from "react";
import { useModal } from "react-modal-hook";
export const App = () => {
const [showModal, hideModal] = useModal(() => (
<div role="dialog" className="modal">
<span>This is a modal window</span> <a onClick={hideModal}>Close</a>
</div>
));
return (
<div>
<a onClick={showModal}>Open modal</a>
</div>
);
};
MIT © mpontus