@1productaweek/react-modal-hooks 中文文档教程
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 handleronCancel()
- 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 handleronCancel()
- 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