react-simple-toasts

KO | EN

gitlite — search

#javascript #ai #go #golang #deep-learning #docker #nodejs #java #windows #kubernetes #vue #awesome-list #security #ios

react-simple-toasts

(★ 43)

🍞 Instant, lightweight toast notifications for React. No providers or containers needed.

react-simple-toasts Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Simple Toasts 🍞🚀

Elevate your React applications with ultra-sleek toast notifications! With React Simple Toasts, you get an instant, lightweight, and highly customizable toast notification system - all without the hassle of complex setups. Let's make your user notifications pop!

[![NPM](https://img.shields.io/npm/v/react-simple-toasts.svg)](https://www.npmjs.com/package/react-simple-toasts)
![NPM Downloads](https://img.shields.io/npm/dw/react-simple-toasts.svg)
![Size](https://img.shields.io/bundlephobia/min/react-simple-toasts)
![License](https://img.shields.io/npm/l/react-simple-toasts)
 
[![✅ Test](https://github.com/almond-bongbong/react-simple-toasts/actions/workflows/00_test.yml/badge.svg)](https://github.com/almond-bongbong/react-simple-toasts/actions/workflows/00_test.yml)
[![Deploy to GitHub Pages](https://github.com/almond-bongbong/react-simple-toasts/actions/workflows/01_deploy_to_github_pages.yml/badge.svg)](https://github.com/almond-bongbong/react-simple-toasts/actions/workflows/01_deploy_to_github_pages.yml)

> **🚀 Version 6.0.0 Update Notice**
>
> We've made significant changes in version 6.0.0:
>
> - Switched to BEM styling for easier customization
> - Now requires explicit import of `style.css`

## Table of Contents

- [Installation](#Installation)
- [Usage](#Usage)
- [Key Features](#Key-Features)
- [Themes](#Themes)
- [Documentation](#Documentation)
- [Contribute](#Contribute)
- [License](#License)

## Installation 📦

Get started in seconds!

```bash
npm install react-simple-toasts
```

## Usage 💡

Integrate with ease. Customize with flair.

```jsx
import toast, { toastConfig } from 'react-simple-toasts';
import 'react-simple-toasts/dist/style.css';
import 'react-simple-toasts/dist/theme/dark.css';

toastConfig({ theme: 'dark' });

function MyComponent() {
 return <button onClick={() => toast('Your toast is ready! 🍞')}>Show Toast</button>;
}
```

## Key Features 🌟

- **Ease of Use**: Set up in minutes, not hours!
- **Customizable**: Tailor to your style – themes, durations, interactions.
- **Browser Friendly**: Consistent experience across all major browsers.
- **Interactive**: Engaging, clickable toasts with auto-close options.
- **Multi-Toast Control**: Manage multiple notifications effortlessly.

## Themes 🎨

Your style, your toast. Choose from built-in themes or create your own.

### Standard Theme

### Creative Theme

## Documentation 📘

Explore full [documentation](https://almond-bongbong.github.io/react-simple-toasts/) for in-depth guides, examples, and API details.

## Contribute 🤝

<table>
	<tbody>
		<tr>
 <td align="center">
 <a href="https://github.com/almond-bongbong">
 <img src="https://avatars.githubusercontent.com/u/42146674?v=4" width="100;" alt="almond-bongbong"/>
 
 Max
 </a>
 </td>
 <td align="center">
 <a href="https://github.com/hemengke1997">
 <img src="https://avatars.githubusercontent.com/u/49073282?v=4" width="100;" alt="hemengke1997"/>
 
 Minko
 </a>
 </td>
 <td align="center">
 <a href="https://github.com/Kim-Yeon-ho">
 <img src="https://avatars.githubusercontent.com/u/81131715?v=4" width="100;" alt="Kim-Yeon-ho"/>
 
 Hardy
 </a>
 </td>
 <td align="center">
 <a href="https://github.com/ammuench">
 <img src="https://avatars.githubusercontent.com/u/2099658?v=4" width="100;" alt="ammuench"/>
 
 Alex Muench
 </a>
 </td>
 <td align="center">
 <a href="https://github.com/THEmmanuel">
 <img src="https://avatars.githubusercontent.com/u/36299715?v=4" width="100;" alt="THEmmanuel"/>
 
 Emmanuel Ayodele Bello
 </a>
 </td>
 <td align="center">
 <a href="https://github.com/silverwind">
 <img src="https://avatars.githubusercontent.com/u/115237?v=4" width="100;" alt="silverwind"/>
 
 silverwind
 </a>
 </td>
		</tr>
	<tbody>
</table>

Join our growing community! [Star us on GitHub](https://github.com/almond-bongbong/react-simple-toasts/stargazers) and contribute to making React Simple Toasts better.

## License 📜

React Simple Toasts is MIT licensed.

react-simple-toasts

react-simple-toasts Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-simple-toasts

react-simple-toasts Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README