goey-toast：839⭐の軽量React Toast通知ライブラリ

今日は軽量なReact Toast通知ライブラリ goey-toast を発見しました。starsは多くありません（839）が、機能はシンプルで実用的です。

プロジェクト概要

属性	内容
GitHub	anl331/goey-toast
Stars	839
言語	TypeScript
特徴	軽量、依存関係なし、カスタマイズ可能
最終更新	6日前

主な機能

• 軽量で依存関係なし：コアコードはコンパクトで、他のUIライブラリに依存しません
• TypeScriptサポート：完全な型定義を提供
• 高いカスタマイズ性：スタイル、位置、アニメーションのカスタマイズが可能
• 複数の通知タイプ：success、error、warning、info
• 自動クローズ：自動クローズ時間の設定が可能
• スタック管理：複数のToastのスタック表示を自動管理

クイックスタート

npm install goey-toast
# または
yarn add goey-toast

基本的な使い方

import { ToastContainer, toast } from 'goey-toast';
import 'goey-toast/dist/style.css';

function App() {
  return (
    <div>
      <button onClick={() => toast.success('操作成功！')}>
        成功通知を表示
      </button>
      <button onClick={() => toast.error('操作失敗！')}>
        エラー通知を表示
      </button>
      <ToastContainer />
    </div>
  );
}

高度な使い方

カスタム設定

toast.success('成功', {
  duration: 4000,        // 4秒間表示
  position: 'top-center', // 上部中央
  style: {
    background: '#10b981',
    color: '#fff',
  },
});

カスタムコンポーネント

<ToastContainer
  position="bottom-right"
  autoClose={3000}
  hideProgressBar={false}
  newestOnTop
  closeOnClick
  rtl={false}
  pauseOnFocusLoss
  draggable
  pauseOnHover
/>

使用シナリオ

• フォーム送信のフィードバック
• 操作の成功/失敗通知
• システム通知
• 軽量なメッセージリマインダー

他のライブラリとの比較

ライブラリ	Stars	特徴
react-toastify	13.4k	機能豊富、成熟したエコシステム
react-hot-toast	10.9k	シンプルで使いやすい
goey-toast	839	軽量、依存関係なし、カスタマイズ可能

シンプルで軽量、余分な依存関係がない Toastライブラリが必要な場合、goey-toastは良い選択です。

---

記事は gumi.ink で公開