Cyberpunk 알림 라이브러리와 glitch 애니메이션 및 typewriter 효과

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 페이지에서 라이브 데모를 확인할 수 있으며, 글리치와 타이프라이터 효과가 적용된 다양한 알림 유형(정보, 성공, 경고, 오류)을 보여줍니다.

---

이 글은 원래 Dev.to에 게시되었습니다.