Skip to content

Commit

Permalink
📝 Improve readme readability
Browse files Browse the repository at this point in the history
  • Loading branch information
almond-bongbong committed Jan 21, 2024
1 parent ef68e9f commit 5c6df0e
Showing 1 changed file with 42 additions and 24 deletions.
66 changes: 42 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# React Simple Toasts
# React Simple Toasts 🍞🚀

Instant, lightweight toast notifications for React. No providers or containers needed. 🍃
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)
Expand All @@ -14,21 +14,36 @@ Instant, lightweight toast notifications for React. No providers or containers n
<img src="https://raw.githubusercontent.com/almond-bongbong/react-simple-toasts/master/docs/preview.gif" alt="preview" />
</p>

## 🚀 Getting Started
## Table of Contents
- [Installation](#Installation)
- [Usage](#Usage)
- [Key Features](#Key-Features)
- [Themes](#Themes)
- [Documentation](#Documentation)
- [Contribute](#Contribute)
- [License](#License)

### 📦 Installation
<a name="Installation"></a>
## Installation 📦

```sh
Get started in seconds!



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

### 💡 Usage Example
<a name="Usage"></a>
## Usage 💡

Integrate with ease. Customize with flair.

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

toastConfig({ theme: 'dark' }); // configure global toast settings, like theme
toastConfig({ theme: 'dark' });

function MyComponent() {
return (
Expand All @@ -39,21 +54,19 @@ function MyComponent() {
}
```

## 🌟 Key Features
<a name="Key-Features"></a>
## Key Features 🌟

- **Ease of use**: Simple installation and intuitive API
- **Highly customizable**: Control over appearance, duration, user interaction, and more
- **Browser compatibility**: Seamless operation across various browsers
- **Interactive**: Clickable, with an option to close on click
- **Multiple toasts management**: Control multiple toasts at once
- **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.

## 📘 Comprehensive Documentation
<a name="Themes"></a>
## Themes 🎨

Looking for more details, examples, and customization options? **Explore the full capabilities of React Simple Toasts and try out live examples on our [documentation page](https://almond-bongbong.github.io/react-simple-toasts/)**. It's your one-stop destination for everything you need to know about using this library.

## 🎨 Themes

React Simple Toasts offers fun built-in themes, and the flexibility doesn't stop there. Feel free to customize the themes to match your application's branding. Your toast, your style!
Your style, your toast. Choose from built-in themes or create your own.

### Standard Theme
<p align="center">
Expand All @@ -65,10 +78,15 @@ React Simple Toasts offers fun built-in themes, and the flexibility doesn't stop
<img src="https://raw.githubusercontent.com/almond-bongbong/react-simple-toasts/master/docs/theme_creative.gif" alt="creative theme showcase" />
</p>

## 🤝 Support and Contribution
<a name="Documentation"></a>
## Documentation 📘

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

## Contribute 🤝

If you find this library useful, please give us a star on [GitHub!](https://github.com/almond-bongbong/react-simple-toasts/stargazers) Your support greatly helps the project grow. Contributions are always welcome!
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
## License 📜

Licensed under the MIT License.
React Simple Toasts is MIT licensed.

0 comments on commit 5c6df0e

Please sign in to comment.