Allows modal components to be used without dependency on JSX.
Modal is even better when used with the Compound Component pattern
import { ModalProvider } from '@gomterview/useModal';
function App() {
return (
// Provide the client to your App
<ModalProvider>
<Example />
</ModalProvider>
);
}
function Example() {
const { openModal, closeModal } = useModal(() => {
return (
<div>
<span>Modal Content</span>
<button onClick={closeModal}>Close Modal</button>
</div>
);
});
return <button onClick={openModal}>Open Modal</button>;
}
const { openModal, closeModal } = useModal(() => <Component />);
-
component: React.FC
: Use functional components as modals.
-
openModal: () => void
: Function to show the modal. -
closeModal: () => void
: Function to hide the modal.