@1productaweek/npm-starter 中文文档教程

Question

React Modal Hooks

帮助以更异步的方式加载模态的简单库，并在解析后自动清理模态。

Usage

Step 1 - Add the modal provider

将模态提供程序添加到应用程序的根目录（您可以多次添加它，但没有必要）。

import { ModalProvider } from '@1productaweek/react-modal-hooks'

<ModalProvider usePortal>
  ...
</ModalProvider>

Step 2 - Create a modal

创建自定义模式（或使用库，例如​​ react-modal）。 以下道具 当您打开模态组件时，它会被注入到模态组件中：

• onDone(resolvedValue?: any) - close the modal and optionally return a value to the calling handler
• onCancel() - close the modal, by rejecting the promise

注意：确保您的组件始终显示模态，因为该库会在模态未显示时注意卸载和隐藏模态 需要更长的时间。

import React from 'react'
import Modal from 'react-modal'

// onCancel and onDone are injected into your modal for you
function MyModal ({ onCancel, onDone }) {
  return (
    <Modal 
      onRequestClose={onCancel}
      // Make sure isOpen is always true
      isOpen
    >
      <button onClick={onCancel}>Cancel</button>
      <button onClick={onDone}>Done</button>
    </Modal>
  )
}

Step 3 - Open modal with hooks

打开模态并等待使用挂钩解析的值。

import React from 'react'
import { useModal } from '@1productaweek/react-modal-hooks'
import MyModal from '...'

function AnyComponent ({ onCancel, onDone }) {
  const showModal = useModal(MyModal)

  const onPaymentHandler = async () => {
    // paymentDetails is any value that you passed to the onDone() callback
    const paymentDetails = await showModal({ ...propsToPassToModal })
    alert(`You paid with ${paymentDetails}`)
  }

  return (
    <button onClick={onPaymentHandler}>
      Make Payment
    </button>
  )
}