@1productaweek/react-modal-hooks 中文文档教程

发布于 3年前 浏览 25 项目主页 更新于 3年前

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

Made by 1PAW

https://1productaweek.com

React Modal Hooks

Simple library to help loading modals in a more async way, and auto cleans up modals after they've been resolved.

Usage

Step 1 - Add the modal provider

Add the modal provider to the root of your app (you can add it multiple times, but there is no need).

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

<ModalProvider usePortal>
  ...
</ModalProvider>

Step 2 - Create a modal

Create a custom modal (or use a library e.g. react-modal). The following props will be injected into your modal component when you open it:

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

NOTE: Make sure your component is always showing the modal, as this library will take care to unmount and hide the modal when it is no longer needed.

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

Open the modal and wait for the resolved value using 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>
  )
}

Made by 1PAW

https://1productaweek.com

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文