react-simple-toasts - npm Package Compare versions

Comparing version 5.7.0 to 5.7.1

dist/index.d.ts

@@ -6,3 +6,3 @@ import { ReactNode } from 'react';
 export declare const clearToasts: () => void;
-declare function toast(message: ReactNode, duration?: number): Toast;
+declare function toast(message: ReactNode, duration?: number | null): Toast;
 declare function toast(message: ReactNode, options?: ToastOptions): Toast;
@@ -9,0 +9,0 @@ export declare const createToast: (options: ConfigArgs) => typeof toast;

dist/index.es.js

@@ -57,4 +57,4 @@ import React, { useRef, useState, useLayoutEffect, Fragment, cloneElement } from 'react';
 
-var css_248z = "#style_toast_container__DT-ei * {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n.style_toast-message__-UN8x {\n  opacity: 0;\n  position: fixed;\n  z-index: 1000;\n  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;\n  transition: opacity 0.3s, -webkit-transform 0.3s;\n  transition: opacity 0.3s, transform 0.3s;\n  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;\n}\n.style_toast-message__-UN8x.toast-enter-active,\n.style_toast-message__-UN8x.toast-appear-active {\n  opacity: 1;\n}\n.style_toast-message__-UN8x.toast-exit-active {\n  opacity: 0;\n}\n.style_toast-content__jaj36 {\n  display: inline-block;\n}\n.style_clickable__F3Zx7 {\n  cursor: pointer;\n}\n";
-var styles = {"toast_container":"style_toast_container__DT-ei","toast-message":"style_toast-message__-UN8x","toast-content":"style_toast-content__jaj36","clickable":"style_clickable__F3Zx7"};
+var css_248z = "#style_toast_container__DT-ei * {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n.style_toast-message__-UN8x {\n  opacity: 0;\n  position: fixed;\n  z-index: 1000;\n  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;\n  transition: opacity 0.3s, -webkit-transform 0.3s;\n  transition: opacity 0.3s, transform 0.3s;\n  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;\n}\n.style_top-center__zZFy4,\n.style_bottom-center__NH15O,\n.style_center__GLmmM {\n  left: 50%;\n}\n.style_toast-message__-UN8x.toast-enter-active,\n.style_toast-message__-UN8x.toast-appear-active {\n  opacity: 1;\n}\n.style_toast-message__-UN8x.toast-exit-active {\n  opacity: 0;\n}\n.style_toast-content__jaj36 {\n  display: inline-block;\n}\n.style_clickable__F3Zx7 {\n  cursor: pointer;\n}\n";
+var styles = {"toast_container":"style_toast_container__DT-ei","toast-message":"style_toast-message__-UN8x","top-center":"style_top-center__zZFy4","bottom-center":"style_bottom-center__NH15O","center":"style_center__GLmmM","toast-content":"style_toast-content__jaj36","clickable":"style_clickable__F3Zx7"};
 styleInject(css_248z);
@@ -229,4 +229,4 @@
   useLayoutEffect(function () {
-    var _a;
-    if (((_a = messageDOM.current) === null || _a === void 0 ? void 0 : _a.clientHeight) == null || isEnter) return;
+    if (messageDOM.current == null || isEnter) return;
+    var width = messageDOM.current.clientWidth;
     var height = messageDOM.current.clientHeight;
@@ -236,2 +236,3 @@ if (messageDOM.current) {
         target: messageDOM.current,
+        width: width,
         height: height
@@ -420,3 +421,3 @@ });
     onCloseStart = _r === void 0 ? undefined : _r;
-  var durationTime = duration || defaultOptions.duration;
+  var durationTime = duration === undefined ? defaultOptions.duration : duration;
   var closeOptions = {
@@ -441,3 +442,3 @@ onClose: onClose,
     }
-    if (duration > SET_TIMEOUT_MAX) return;
+    if (duration === null || duration === 0 || duration > SET_TIMEOUT_MAX) return;
     if (closeTimer) {
@@ -521,3 +522,3 @@ clearTimeout(closeTimer);
 function toast(message, durationOrOptions) {
-  var options = typeof durationOrOptions === 'number' ? {
+  var options = typeof durationOrOptions === 'number' || durationOrOptions === null ? {
     duration: durationOrOptions
@@ -524,0 +525,0 @@ } : durationOrOptions;

dist/index.js

@@ -80,4 +80,4 @@ 'use strict';
 
-var css_248z = "#style_toast_container__DT-ei * {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n.style_toast-message__-UN8x {\n  opacity: 0;\n  position: fixed;\n  z-index: 1000;\n  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;\n  transition: opacity 0.3s, -webkit-transform 0.3s;\n  transition: opacity 0.3s, transform 0.3s;\n  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;\n}\n.style_toast-message__-UN8x.toast-enter-active,\n.style_toast-message__-UN8x.toast-appear-active {\n  opacity: 1;\n}\n.style_toast-message__-UN8x.toast-exit-active {\n  opacity: 0;\n}\n.style_toast-content__jaj36 {\n  display: inline-block;\n}\n.style_clickable__F3Zx7 {\n  cursor: pointer;\n}\n";
-var styles = {"toast_container":"style_toast_container__DT-ei","toast-message":"style_toast-message__-UN8x","toast-content":"style_toast-content__jaj36","clickable":"style_clickable__F3Zx7"};
+var css_248z = "#style_toast_container__DT-ei * {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n.style_toast-message__-UN8x {\n  opacity: 0;\n  position: fixed;\n  z-index: 1000;\n  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;\n  transition: opacity 0.3s, -webkit-transform 0.3s;\n  transition: opacity 0.3s, transform 0.3s;\n  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;\n}\n.style_top-center__zZFy4,\n.style_bottom-center__NH15O,\n.style_center__GLmmM {\n  left: 50%;\n}\n.style_toast-message__-UN8x.toast-enter-active,\n.style_toast-message__-UN8x.toast-appear-active {\n  opacity: 1;\n}\n.style_toast-message__-UN8x.toast-exit-active {\n  opacity: 0;\n}\n.style_toast-content__jaj36 {\n  display: inline-block;\n}\n.style_clickable__F3Zx7 {\n  cursor: pointer;\n}\n";
+var styles = {"toast_container":"style_toast_container__DT-ei","toast-message":"style_toast-message__-UN8x","top-center":"style_top-center__zZFy4","bottom-center":"style_bottom-center__NH15O","center":"style_center__GLmmM","toast-content":"style_toast-content__jaj36","clickable":"style_clickable__F3Zx7"};
 styleInject(css_248z);
@@ -252,4 +252,4 @@
   React.useLayoutEffect(function () {
-    var _a;
-    if (((_a = messageDOM.current) === null || _a === void 0 ? void 0 : _a.clientHeight) == null || isEnter) return;
+    if (messageDOM.current == null || isEnter) return;
+    var width = messageDOM.current.clientWidth;
     var height = messageDOM.current.clientHeight;
@@ -259,2 +259,3 @@ if (messageDOM.current) {
         target: messageDOM.current,
+        width: width,
         height: height
@@ -443,3 +444,3 @@ });
     onCloseStart = _r === void 0 ? undefined : _r;
-  var durationTime = duration || defaultOptions.duration;
+  var durationTime = duration === undefined ? defaultOptions.duration : duration;
   var closeOptions = {
@@ -464,3 +465,3 @@ onClose: onClose,
     }
-    if (duration > SET_TIMEOUT_MAX) return;
+    if (duration === null || duration === 0 || duration > SET_TIMEOUT_MAX) return;
     if (closeTimer) {
@@ -544,3 +545,3 @@ clearTimeout(closeTimer);
 function toast(message, durationOrOptions) {
-  var options = typeof durationOrOptions === 'number' ? {
+  var options = typeof durationOrOptions === 'number' || durationOrOptions === null ? {
     duration: durationOrOptions
@@ -547,0 +548,0 @@ } : durationOrOptions;

dist/type/common.d.ts

@@ -7,3 +7,3 @@ import { ReactElement, ReactNode, SyntheticEvent } from 'react';
 export interface ToastOptions {
-    duration?: number;
+    duration?: number | null;
     className?: string;
@@ -24,2 +24,3 @@ clickable?: boolean;
     target: HTMLDivElement;
+    width: number;
     height: number;
@@ -34,3 +35,3 @@ };
     close: () => void;
-    updateDuration: (duration?: number) => void;
+    updateDuration: (duration?: ToastOptions['duration']) => void;
     update: (message: ReactNode, duration?: number) => void;
@@ -44,2 +45,3 @@ }
     isExit?: boolean;
+    width?: number;
     height?: number;
@@ -46,0 +48,0 @@ gap: number;

package.json

 {
   "name": "react-simple-toasts",
-  "version": "5.7.0",
-  "description": "React Simple Toasts is a simple and easy-to-use toast message popup for React.",
+  "version": "5.7.1",
+  "description": "Lightweight, user-friendly toast message library for React applications. Add beautiful notifications to your React apps.",
   "author": "almond-bongbong",
@@ -6,0 +6,0 @@ "homepage": "https://github.com/almond-bongbong/react-simple-toasts",

README.md

 # React Simple Toasts
 
-React Simple Toasts is a lightweight, user-friendly toast message library for React applications.
+React Simple Toasts is a lightweight, user-friendly toast message library for React applications. Add beautiful notifications to your React apps.
 
 
 [![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/dt/react-simple-toasts.svg)
+![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)
 
-## Sample Showcase
-
 <p align="center">
@@ -17,33 +15,6 @@ <img src="https://raw.githubusercontent.com/almond-bongbong/react-simple-toasts/master/docs/preview.gif" alt="preview" />
 
+## 🚀 Getting Started
 
-## Documentation
+### 📦 Installation
 
-Explore the full capabilities of React Simple Toasts and try out live examples in our [documentation page](https://almond-bongbong.github.io/react-simple-toasts/).
-
-## Key Features
-
-- **Ease of use**: With a simple installation process and an intuitive API, you can get started with the library in no time.
-- **Highly customizable**: You can control various aspects of your toast messages, from their appearance and duration to their behavior upon user interaction.
-- **Custom rendering**: The library supports custom rendering, allowing you to tailor the look of your toast messages to match your application's branding.
-- **Positioning**: The library allows you to position your toasts at any corner or center of the viewport, offering a high level of control over where your messages appear.
-- **Browser compatibility**: The library includes utility functions to ensure that it works seamlessly across different browsers.
-- **Interactive**: The library allows toasts to be clickable and to close on click if desired, enabling user interaction.
-- **Multiple toasts management**: It provides functionality to manage multiple toasts by controlling the maximum number of visible toasts at a time.
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Usage](#usage)
-- [API](#api)
-  - [toast(message, options)](#toastmessage-options)
-  - [Toast Return Object](#toast-return-object)
-  - [Configuring Toasts: createToast and toastConfig](#configuring-toasts-createtoast-and-toastconfig)
-- [Contributing](#contributing)
-- [Support Us](#support-us)
-- [License](#license)
-
-## Installation
-
-Install the package via npm:
-
 ```sh
@@ -53,44 +24,42 @@ npm install react-simple-toasts
 
-## Usage
+### 💡 Usage Example
 
-Import and call the toast function with a message to display:
-
 ```jsx
 import toast from 'react-simple-toasts';
-import 'react-simple-toasts/dist/theme/dark.css'; // import the desired theme
+import 'react-simple-toasts/dist/theme/dark.css'; // choose your theme
 
-// specify the theme in toastConfig
-toastConfig({
-  theme: 'dark',
-});
+toastConfig({ theme: 'dark' });
 
 function MyComponent() {
-  return <button onClick={() => toast('Hello, world!')}>Display Toast</button>;
+  return <button onClick={() => toast('Your toast is ready! 🍞')}>Show Toast</button>;
 }
 ```
 
-## API
 
-### toast(message, options)
+## 🌟 Key Features
 
-Displays a toast message with the specified message and options. Detailed options can be found on our [documentation page](https://almond-bongbong.github.io/react-simple-toasts/api#toast).
+- **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
 
-### Toast Return Object
+## 📘 Comprehensive Documentation
 
-The `toast` function returns a control object with methods to manage the displayed toast. You can find examples of usage on our [documentation page](https://almond-bongbong.github.io/react-simple-toasts/api#toast).
+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.
 
-### Configuring Toasts: `createToast` and `toastConfig`
+## 🎨 Themes
 
-The `createToast` and `toastConfig` functions allow for advanced configuration of your toast notifications. Use `createToast` to generate a toast function with specific settings, and `toastConfig` to set default options for all toast messages in your application. See our [documentation page](https://almond-bongbong.github.io/react-simple-toasts/api#toast-config) for more details.
+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!
 
-## Contributing
+<p align="center">
+  <img src="https://raw.githubusercontent.com/almond-bongbong/react-simple-toasts/master/docs/theme-showcase.gif" alt="theme-showcase" />
+</p>
 
-Contributions are always welcome!
+## 🤝 Support and Contribution
 
-## Support Us
+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!
 
-If you find this library useful, consider giving us a star on [GitHub!](https://github.com/almond-bongbong/react-simple-toasts/stargazers) Your support is greatly appreciated and it helps the project grow.
+## 📜 License
 
-## License
-
-This project is licensed under the MIT License.
+Licensed under the MIT License.

No alert changes

Improved metrics

Lines of code

1315

0.46%

Worsened metrics

Total package byte prevSize

58037

-1.32%

Number of lines in readme file

64

-32.63%

No dependency changes