我如何使用钩子的反应吐司?

Question

我找到了useToast和useToastContainer，但是没有文档，我不明白tu如何使用这些钩子。任何人都可以提供有关这些钩子的一些信息吗？

Answer 1

toasts继承ToastContainer’s道具。Toast 上定义的道具取代了 ToastContainer 的道具。

有两种方法可以在应用程序中使用toasts：

1. 定义组件内部的ToastContainer

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const App = () => {
notify = () => toast("Wow so easy !");
return (
<div>
<button onClick={notify}>Notify !</button>
// You can add <ToastContainer /> in root component as well.
<ToastContainer />
</div>
);
}

2. 在应用中调用toast.configure()一次。在应用的root是最好的地方。

如果未挂载任何ToastContainer，则库将为您挂载。

import { toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

// Call it once in your app. At the root of your app is the best place
toast.configure()

const App = () => {
notify = () => toast("Wow so easy !");
return (
<button onClick={notify}>Notify !</button>
);
}

您可以使用其中任何一个。我更喜欢第二种方法，因为您只需要定义toast.configure()这是添加它的非常干净的方式。

您可以根据需要添加配置，如下所示：

toast.configure({
autoClose: 8000,
draggable: false,
//etc you get the idea
});

编辑

如果要使用 Toast挂钩，则必须使用 ToastProvider 包装应用，以便能够访问应用中其他位置的上下文。

import { ToastProvider, useToasts } from 'react-toast-notifications'
const FormWithToasts = () => {
const { addToast } = useToasts()
const onSubmit = async value => {
const { error } = await dataPersistenceLayer(value)
if (error) {
addToast(error.message, { appearance: 'error' })
} else {
addToast('Saved Successfully', { appearance: 'success' })
}
}
return <form onSubmit={onSubmit}>...</form>
}
const App = () => (
<ToastProvider>
<FormWithToasts />
</ToastProvider>
)