Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

🍞 An accessible and beautiful notification library for React.

License

NotificationsYou must be signed in to change notification settings

pheralb/toast

Repository files navigation

@pheralb/toast

An accessible notification library for React.

Documentation  ✦  Getting Started  ✦  Contribute  ✦  Roadmap  ✦  License

React BadgeNext.js BadgeVitest BadgeGitHub releasesnpm bundle sizeBuild StatusGitHub starsGitHub issues

🪐 Features

  • 🍂 Lightweight.
  • ✅ Accessible.
  • 🎨 Light, dark & system theme mode.
  • ⏲️ Don't close automatically when the user hover over the toast.
  • 🏗️ Customizable toast position.
  • 🍃 Disable transitions if the user has disabled them in the system.
  • 💙 Built completely with Typescript.

✨ Inspiration

🚀 Getting Started

Important

This library requiresReact v18 or higher.

  1. Install the library:
# Using npm:npm install @pheralb/toast# Using pnpm:pnpm add @pheralb/toast# Using yarn:yarn install @pheralb/toast
  1. Add the toast provider:
// 📃 root.tsximport{Toaster}from"@pheralb/toast";ReactDOM.createRoot(document.getElementById("root")!).render(<React.StrictMode><App/><Toaster/></React.StrictMode>,);
  1. Usage:
// 📃 index.tsximport{toast}from"@pheralb/toast";exportdefaultfunctionIndex(){return(<><buttononClick={()=>toast.success({text:"pheralb/toast",description:"✨ A beautiful toast library for React",})}><span>Render a toast</span></button></>);}

Tip

📚 Visit theDocumentation for more information.

🔭 Roadmap

  • 🚗 Add.loading variant.
  • 📚 Add support for Astro + React.
  • ✨ Export bundled & minified.css file.
  • 🎨 Add support to customize the default styles for greater flexibility and adaptability.

🤝 Contributing

pheralb/toast is a monorepo built withTurbo and it uses:

  • Website: Next.js 15 + Content-Collections + MDX + shadcn/ui + Lucide + React-Symbols.
  • Library: React 19 with tsup + Lightning CSS + Vitest for testing.

  1. Click here to fork the repository.

  2. Install dependencies:

# Install pnpm globally if you don't have it:npm install -g pnpm# and install dependencies:pnpm install
  1. Commands:
# Run only documentation website:pnpm dev:docs# Run all website + packages:pnpm dev# Build the docs & library:pnpm build# Test the library:pnpmtest

🧑‍🚀 Openhttp://localhost:3000 to view theNext.js documentation website.

and create a pull request with your features or fixes 🚀✨.

📃 License

MIT License -pheralb 2024.

About

🍞 An accessible and beautiful notification library for React.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors2

  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp