带有 glitch 动画和打字机效果的 Cyberpunk 通知库

Source: Dev.to

安装

npm install cyberpunk-notify

基本用法（React）

import { CyberpunkToast } from "cyberpunk-notify";

function App() {
  const notify = () => {
    CyberpunkToast.show({
      message: "Welcome to the future!",
      type: "info",
    });
  };

  return <button onClick={notify}>Show Notification</button>;
}

自定义

你可以在样式表中定义 CSS 变量来覆盖默认样式：

:root {
  --cp-notify-bg: #0f0f0f;
  --cp-notify-color: #00ff41;
  --cp-glitch-intensity: 0.8;
  --cp-typewriter-speed: 50ms;
}

演示

项目的 GitHub 页面提供了在线演示，展示了不同类型的通知（info、success、warning、error）以及故障和打字机效果。

---

本文最初发表于 Dev.to.