显示 react-toastify 的自定义 toast 函数 - Toast show - Javascript

React-toastify 是为了更好地管理和展示提示消息而创建的 React 组件库。它允许构建完全自定义的通知。

安装

React-toastify 可以通过 NPM 安装：

npm install react-toastify

或者通过 Yarn 安装：

yarn add react-toastify

使用

在你的 React 项目中，你需要导入 react-toastify 和 react-toastify/dist/ReactToastify.css 文件。然后，你可以使用 ToastContainer 组件来包含你的消息：

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

function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <ToastContainer />
    </div>
  );
}

export default App;

此代码会在页面顶部创建 Toast 容器。

接下来，你可以使用 toast 函数来显示通知。该函数有多个参数，其中最重要的是 content 属性，它定义了要显示的消息文本。

import { toast } from 'react-toastify';

function CustomToast() {
  return (
    <div>
      <h2>Success</h2>
      <p>Your action is complete!</p>
    </div>
  );
}

function handleClick() {
  toast.success(<CustomToast />);
}

function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <button onClick={handleClick}>Click me!</button>
      <ToastContainer />
    </div>
  );
}

export default App;

在此示例中，我们定义了一个自定义的 Toast 组件，并在按钮上使用了 handleClick 函数。该函数使用 toast.success 函数来显示成功消息。

除了 toast.success，还有 toast.error、toast.warn、toast.info 和 toast.dark 等等，每个函数都对应不同类型的消息。

自定义样式

除了显示自定义 Toast 组件外，你可以通过 toast 函数中的 options 属性来调整 Toast 的行为和样式。

下面是一些示例：

toast.success(<CustomToast />, {
  position: 'top-center',
  autoClose: 5000,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  progress: undefined,
  theme: 'dark',
  onClose: () => console.log('toast closed'),
  onOpen: () => console.log('toast opened')
});

这些参数包括了位置、自动关闭时间、进度条、是否点击关闭、鼠标悬停是否暂停、是否可以拖动、进度条组件、主题、打开/关闭回调函数等等。

你可以根据自己的需要进行调整。

代码片段

以下是展示 Notification 的示例代码：

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

function CustomToast() {
  return (
    <div>
      <h2>Success</h2>
      <p>Your action is complete!</p>
    </div>
  );
}

function handleClick() {
  toast.success(<CustomToast />);
}

function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <button onClick={handleClick}>Click me!</button>
      <ToastContainer />
    </div>
  );
}

export default App;

在此示例中，handleClick 函数会显示一个自定义的成功通知。

你也可以使用 toast.error、toast.warn、toast.info 和 toast.dark 等函数来显示不同类型的通知。

结论

React-toastify 是一个非常有用的 React 组件库，它能够很好地管理和展示提示消息。你可以使用它来构建自定义的 Toast 组件，并调整通知样式以满足你的需要。