https://github.com/teneplaysofficial/toast
Effortless Toasts.
https://github.com/teneplaysofficial/toast
frontend library motion npm react reusable-components tailwindcss
Last synced: 4 months ago
JSON representation
Effortless Toasts.
- Host: GitHub
- URL: https://github.com/teneplaysofficial/toast
- Owner: TenEplaysOfficial
- License: mit
- Created: 2025-02-17T20:36:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-17T09:47:44.000Z (over 1 year ago)
- Last Synced: 2025-03-23T18:51:46.659Z (over 1 year ago)
- Topics: frontend, library, motion, npm, react, reusable-components, tailwindcss
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@tenedev/toast
- Size: 231 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @tenedev/toast - Effortless Toasts
@tenedev/toast is a lightweight, customizable React component library for displaying toast notifications. It enables developers to show alerts, success messages, and other notifications in a smooth, non-intrusive way. [View Demo](https://reactprojectsbytene.vercel.app/package/toast)
## Features
- 🚀 **Smooth animations**
- 🎨 **Highly customizable**
- ⚡ **Lightweight & easy to integrate**
- 🛠 **Supports any React content**
## Installation
Install via npm or yarn:
```bash
npm install @tenedev/toast
```
```bash
yarn add @tenedev/toast
```
## Usage
### Basic Example
```jsx
import { Toaster } from '@tenedev/toast';
export default function App() {
return ;
}
```
### Adding Toast Notifications
```jsx
import { Toaster, toast } from '@tenedev/toast';
export default function App() {
return (
<>
toast('Hello, World!')}>Show Toast
toast.success('Success!')}>
Show Success Toast
toast.info('Custom Toast', {
description: 'this is a description',
})
}
>
Show Info Toast
>
);
}
```
## Props
### Toaster Props
| Prop | Type | Default | Description |
| ------------- | --------- | -------------- | --------------------------------- |
| `position` | `string` | `bottom-right` | Position of the toast component |
| `gap` | `number` | `5` | Space between toast items |
| `closeButton` | `boolean` | `false` | Show close button on toast |
| `richColors` | `boolean` | `false` | give rich color to toast |
| `duration` | `number` | `4000` | Time (ms) before toast disappears |
### Toast Function Props
| Prop | Type | Default | Description |
| ------ | -------- | ------- | ----------------------------------------------------- |
| `type` | `string` | - | Type of toast (`success`, `error`, `warning`, `info`) |
## Contributing
1. Fork the repository
2. Create a feature branch
3. Submit a pull request 🚀
## License
This project is licensed under the [MIT License](https://chatgpt.com/c/LICENSE).
⭐ **[Star on GitHub](https://github.com/TenEplaysOfficial/toast)**