@gomterview/use-modal

useModal

Allows modal components to be used without dependency on JSX.

Example

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>;
}

API

useModal

const { openModal, closeModal } = useModal(() => <Component />);

Parameters

• component: React.FC: Use functional components as modals.

Return

• openModal: () => void: Function to show the modal.
• closeModal: () => void: Function to hide the modal.