fancy-react-modal v1.0.8

fancy-react-modal

modal dialog for React.JS

install

$ npm install fancy-react-modal  
$ yarn install fancy-react-modal

example

Parent Component

import React, { FC } from 'react';
import Modal from 'fancy-react-modal';
import Alert, { IAlertProps, IAlertResult } from './components/alert';

const Parent = () => {

  const openModal = () => {
    Modal.open<IAlertProps, IAlertResult>(Alert, {}).then((result: IAlertResult) => {
      // after modal component dismiss function
    }).catch(() => {
      // after click modal background
    });
  }

  return (
    <>
      <button onClick={() => {openModal()}}>open</button>
    </>
  )
}

Modal Component

import React, { FC } from 'react';
import { IBaseModalProps } from 'fancy-react-modal';

interface IAlertModalProps extends IBaseModalProps<IAlertResult> {}

interface IAlertModalResult {}

const Alert: FC<IAlertModalProps> = ({ dismiss }) => {

  return (
    <>
      <div>
        Hi I am Modal
        <button onClick={() => {dismiss()}}>close</button>
      </div>
    </>
  )
}