@kstraessler/rentnertoasts (1.0.5)
Published 2026-03-21 18:46:46 +00:00 by kstraessler
Installation
@kstraessler:registry=npm install @kstraessler/rentnertoasts@1.0.5"@kstraessler/rentnertoasts": "1.0.5"About this package
RentnerToasts
Eine einfache und effiziente Toast-Library für React-Anwendungen.
Installation
Installiere das Paket über npm:
npm install @kstraessler/rentnertoasts
Schritt-für-Schritt-Anleitung
1. Provider einrichten
Um die Toasts überall in deiner App nutzen zu können, musst du den ToastProvider in deiner Hauptkomponente (meistens um das Outlet oder die App-Routes herum) einbinden.
import { ToastProvider } from '@kstraessler/rentnertoasts'
function App() {
return (
<ToastProvider>
<Outlet />
</ToastProvider>
)
}
2. Toasts in Komponenten verwenden
Nutze den useToast Hook, um Benachrichtigungen auszulösen.
import { useToast } from '@kstraessler/rentnertoasts'
function MyComponent() {
const { showToast } = useToast()
function handleClick() {
showToast('Deine Nachricht', 'Erfolg', 'success')
}
return (
<button onClick={handleClick}>
Toast anzeigen
</button>
)
}
Typdefinitionen
showToast Funktion
Die Funktion nimmt drei Parameter entgegen:
| Parameter | Typ | Beschreibung |
|---|---|---|
Content |
string |
Der Haupttext der Nachricht. |
Title |
string |
Die Überschrift des Toasts. |
Type |
string |
Der Typ: 'success', 'error', 'info' oder 'warning'. |
CSS-Integration
Füge die folgenden Zeilen in deine Haupt-CSS-Datei ein, um die Toast-Stile zu importieren.
@import 'tailwindcss';
@source "../node_modules/@kstraessler/rentnertoasts";
Dependencies
Dependencies
| ID | Version |
|---|---|
| framer-motion | ^12.38.0 |
| lucide-react | ^0.577.0 |
Development dependencies
| ID | Version |
|---|---|
| @types/react | ^19.2.14 |
| @types/react-dom | ^19.2.3 |
| typescript | ^5.9.3 |
Peer dependencies
| ID | Version |
|---|---|
| react | ^18.0.0 || ^19.0.0 |
| react-dom | ^18.0.0 || ^19.0.0 |