内联信息组件 - react-local-toast的使用教程

react-local-toast是一个React组件，它可以像工具提示或弹出式窗口一样，在任何DOM元素上显示一个内联的敬酒信息。

支持各种类型的祝酒词，如信息、成功、警告、错误和加载。无障碍设计是考虑到的。

如何使用它

1.安装并导入 react-local-toast。

# Yarn
$ yarn add react-local-toast

# NPM
$ npm i react-local-toast

// required stylesheet
import 'react-local-toast/dist/bundle.min.css';

2.用LocalToastProvider 来包装你的应用程序。

import React from 'react';
import { LocalToastProvider } from 'react-local-toast';
export default () => {
  return (<LocalToastProvider>
    <App />
  </LocalToastProvider>);
};

3.在你的元素上附加一个内联的toast。

import React from 'react';
import { LocalToastTarget, useLocalToast } from 'react-local-toast';

export const App = () => {
  const {showToast, removeToast} = useLocalToast();
  return (<div>
    <p>This component should be inside LocalToastProvider</p>
    <LocalToastTarget name="btn">
        <button onClick={() => showToast('btn', 'Hello my first toast!')}>Click me please!</button>
    </LocalToastTarget>
  </div>);
};

预览

The postInline Toast Message Component - react-local-toastappeared first onReactScript.