React-modal

React-modal is a simplest way to create dialog on your ReactJS site.

• Small (less than 45Kb)
• Mobile friendly
• Without dependencies

Getting Started

Install this package:

npm i @midly/react-modal

Import the component (import modalRef type if TSX):

//component.tsx
import {Modal} from '@midly/react-modal';
import {ModalRef} from '@midly/react-modal/dist/esm/Modal'

const modalRef = useRef<ModalRef>(null)

<Modal ref={modalRef}>Your content</Modal>

You can then render the Modal component like any other React component in JSX/TSX.

//component.tsx
const showModal = useCallback<SubmitHandler>(() => modalRef.current?.open(), [])

<button className="button" onClick={showModal}>Open modal</button>