土司

Toast是一个弹出消息,用来向我们的用户显示相关信息.

图片参考

图片

使用量

import { Toaster, ToastType, emitToast } from '@dt-dds/react';

const notify = () =>
  emitToast({
    title: 'success',
    message: 'myMEssage' + count,
    type: ToastType.Success,
    children: (
      <Tooltip>
        <Button onClick={() => console.log('clicked')}>Action 2</Button>
        <Tooltip.Content>Some tooltip</Tooltip.Content>
      </Tooltip>
    ),
  });

const App = () => {
  return (
    <div>
      <button onClick={notify}>Click me</button>
      <Toaster />
    </div>
  );
};

可自定义

这是一个非常定制的组件. 我们用的是 反应- 热- 托斯克 为了控制我们的供应商 你可以检查 react-hot-toast 记录更多这方面的知识。 不过,如果您愿意,您可以创建供货商。 比如说你想创造一个新的道具 autoHide如果这个道具不真实, 你想让吐司无限期地在屏幕上.

interface CallToastArgs {
  title: string;
  message: string;
  type: ToastType;
  autoHide: boolean;
}

export const ToasterContext = createContext({
  callToast: (args: CallToastArgs) => null,
});

const Toaster = ({ children }: { children: React.ReactNode }) => {
  const [toast, setToast] = useState<
    Partial<ToastProps> & { autoHide: boolean }
  >(null);

  const callToast = ({ title, message, type, autoHide }: CallToastArgs) =>
    setToast({
      id: Date.now().toString(),
      title,
      message,
      type,
      autoHide,
    });

  const close = () =>
    setToast((prevState) => ({ ...prevState, isVisible: false }));

  useEffect(() => {
    if (toast && toast.autoHide) {
      const timer = setTimeout(() => close(), 1000);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  return (
    <ToasterContext.Provider value={{ callToast }}>
      {children}
      <div style={{ position: 'fixed', bottom: 10, left: 10 }}>
        {toast && (
          <Toast
            key={toast.id}
            id={toast.id}
            type={toast.type}
            title={toast.title}
            message={toast.message}
            isVisible={toast.isVisible}
            onClose={close}
          />
        )}
      </div>
    </ToasterContext.Provider>
  );
};

const App = () => {
  return (
    <Toaster>
      <MyComponent />
    </Toaster>
  );
};

const MyComponent = () => {
  const { callToast } = useContext(ToasterContext);

  return (
    <Button
      onClick={() =>
        callToast({
          message: 'myMEssage' + count,
          type: ToastType.Success,
          title: 'success',
          autoHide: false,
        })
      }
    >
      Clicked Me
    </Button>
  );
};

API 密码

烤面包机

发出祝词

出自Toast可选词. 它们将覆盖从 <Toaster />。例如:

您可以检查所有 Toast 选项 这里。 。 。 . 土司的位置是固定的,在小屏幕上,它会位于下方中心并会位于大屏幕上,右下方. 任何一种土司的默认持续时间为4000ms. 对于错误类型,持续时间是无限的.

辞退

土司

堆栈

• 类型脚本 用于静态类型检查
• 反应 — JavaScript 用户界面库
• 情感 用于使用 JavaScript 写入 Css 样式
• 故事书 ——由Vite供电的UI组件环境
• 欢乐 - JavaScript 测试框架
• 反应测试库 - 以用户为中心测试用户界面组件
• ESLint 语录 代码林入
• 高级 用于代码格式
• 苏普 - 由Esbuild供电的脚本捆绑机
• 雅伦 从管理软件包

图标

• yarn build - 制作软件包
• yarn dev - 在当地运行软件包
• yarn lint - 将所有文件输入此软件包
• yarn test - 测试所有单位
• yarn test:report - 打开测试覆盖报告
• yarn test:update:snapshot - 进行所有单元测试并更新快照

汇编

运行 yarn build 从软件包的根部 齐声 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .

这个 /dist 文件夹包含编译输出.

toast
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...

版本

跟着 语义版本

许可证

许可证根据 MIT 许可证