Kevin Sträßler

Repositories

3

Projects Packages

7

Public activity Starred repositories

@kstraessler/rentnertoasts (1.0.4)

Published 2026-03-20 16:29:14 +00:00 by kstraessler

Installation

Setup this registry in your project .npmrc file:

@kstraessler:registry=

To install the package using npm, run the following command:

npm install @kstraessler/rentnertoasts@1.0.4

or add it to the package.json file:

"@kstraessler/rentnertoasts": "1.0.4"

For more information on the npm registry, see the documentation.

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 und die benötigten Farbvariablen zu definieren.

@import 'tailwindcss';
@source "../node_modules/@kstraessler/rentnertoasts";

@theme {
  --color-surface-dark: #1a1a1a;
  --color-secondary-text: #9ca3af;
  --color-border-dark: #2d2d2d;
  --color-primary: #13ecd6;
}

Dependencies

Dependencies

ID	Version
framer-motion	^12.38.0
lucide-react	^0.577.0

Development dependencies

ID	Version
@tailwindcss/cli	^4.0.0
@types/react	^19.2.14
@types/react-dom	^19.2.3
tailwindcss	^4.0.0
typescript	^5.9.3

Peer dependencies

ID	Version
react	^18.0.0 || ^19.0.0
react-dom	^18.0.0 || ^19.0.0

Details

npm

2026-03-20 16:29:14 +00:00

1

6.4 KiB

Assets (1)

rentnertoasts-1.0.4.tgz 6.4 KiB

Versions (6) View all

1.0.5 2026-03-21

1.0.4 2026-03-20

1.0.3 2026-03-18

1.0.2 2026-03-18

1.0.1 2026-03-18