https://github.com/preachjs/toast
https://github.com/preachjs/toast
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/preachjs/toast
- Owner: preachjs
- License: mit
- Created: 2025-03-09T19:41:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-10T06:51:40.000Z (over 1 year ago)
- Last Synced: 2025-03-10T07:30:37.419Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://preachjs.github.io/toast/
- Size: 29.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @preachjs/toast
> Simple toasts for preact
[](https://www.npmjs.com/package/@preachjs/toast)
[Demo →](https://preachjs.github.io/toast/)
## Highlights
- 💅 CSS based
- ⚡️ Built on @preact/signals
- 📦 Tiny bundle size (~1KB GZipped)
- 🤌 Simple API
## Install
```sh
npm i @preachjs/toast
```
## Usage
```js
import { toast, Toaster } from '@preachjs/toast'
const App = () => {
return (
toast('hello')}>toast
)
}
```
## API
### `Toaster`
Component that acts a container for the toasts.
### `toast(message: string, options?: Options)`
Displays a toast with the provided message.
#### Options
| Name | Type | Default | Description |
| ---------- | ------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| position | string | 'top-center' | Position of the toast. Available options: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right' |
| closeDelay | number | 3000 | Delay in milliseconds before the toast automatically closes. |
#### MessageInput
Can be either a string or a JSX element:
```tsx
type MessageInput = string | JSX.Element
```
#### Toast Variants
- `toast.success(message: MessageInput, options?: Options)` - Green success
toast
- `toast.error(message: MessageInput, options?: Options)` - Red error toast
- `toast.info(message: MessageInput, options?: Options)` - Blue info toast
- `toast.warning(message: MessageInput, options?: Options)` - Yellow warning
toast
### `toast.promise(promise: Promise, options: PromiseOptions)`
Displays toasts for different promise states.
#### PromiseOptions
| Name | Type | Description |
| ------- | ------ | ------------------------------------------------ |
| loading | string | Message to display while the promise is pending. |
| success | string | Message to display if the promise resolves. |
| error | string | Message to display if the promise rejects. |
### Promise Example
```tsx
const saveData = async () => {
const promise = fetch('/api/data')
toast.promise(promise, {
loading: 'Saving...',
success: 'Data saved!',
error: 'Failed to save data',
})
}
```
## License
MIT