Merge pull request #30 from sudhucodes/dev

sudhucodes · web-flow · commit 95369a936aa5 · 2026-04-22T12:21:50.000+05:30
Add pause on hover for toasts and update package details
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@ Fast, flexible, developer-friendly React toast notifications with a clean black
 - **Tailwind Driven**: Styled with Tailwind CSS for modern aesthetics.
 - **Performance**: Built with tsup for high performance and small bundle size.
 - **Customizable**: Easily customize duration, type, and icons.
+- **Readable by Default**: Auto-closing toasts pause while hovered.
 - **Promise Support**: First-class support for `toast.promise`.
 
 ## Installation
@@ -60,6 +61,9 @@ toast.error('An error occurred. Please try again.');
 toast.warning('Check your internet connection.');
 toast.loading('Saving results...');
 
+// Hover pauses auto close by default
+toast('Hover me if you need more time to read', { duration: 5000 });
+
 // Promise toast
 toast.promise(saveData(), {
     loading: 'Saving...',
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,16 @@
 # docs
 
+## 0.2.0
+
+### Minor Changes
+
+- a54010e: feat: add pause on hover functionality for auto-closing toasts and update documentation
+
+### Patch Changes
+
+- Updated dependencies [a54010e]
+    - react-toast-msg@2.9.0
+
 ## 0.1.2
 
 ### Patch Changes
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
@@ -10,6 +10,7 @@ export default function Page() {
     const [ToastContainerConfig, setToastContainerConfig] = useState({
         autoClose: 5000,
         closeButton: true,
+        pauseOnHover: true,
     });
     const [copy, setCopy] = useState<boolean>(false);
     const messages = {
@@ -78,6 +79,10 @@ export default function Page() {
                     </a>{' '}
                     library, designed to display customizable notification messages.
                 </p>
+                <p className="max-w-xl text-center text-sm text-slate-500">
+                    Auto-closing toasts pause while hovered by default. Toggle it below to compare
+                    the behavior.
+                </p>
 
                 <h3 className="mt-8 text-2xl font-bold">Toast Configuration</h3>
 
@@ -114,6 +119,23 @@ export default function Page() {
                             <option value="false">False</option>
                         </select>
                     </div>
+                    <div className='flex flex-col gap-2'>
+                        <label htmlFor="pauseOnHover">Pause On Hover</label>
+                        <select
+                            id="pauseOnHover"
+                            value={ToastContainerConfig.pauseOnHover ? 'true' : 'false'}
+                            onChange={(e) =>
+                                setToastContainerConfig({
+                                    ...ToastContainerConfig,
+                                    pauseOnHover: e.target.value === 'true',
+                                })
+                            }
+                            className='border border-gray-200 rounded-md px-2 py-1'
+                        >
+                            <option value="true">True</option>
+                            <option value="false">False</option>
+                        </select>
+                    </div>
                 </div>
 
                 <div className="flex flex-wrap items-center justify-center gap-4">
@@ -147,6 +169,12 @@ export default function Page() {
                     >
                         Promise (Loader)
                     </button>
+                    <button
+                        onClick={() => toast('Hover this toast to pause the timer', { duration: 5000 })}
+                        className="rounded-md border border-gray-200 bg-gray-50 px-5 py-2 text-sm hover:bg-gray-200/80 active:scale-95 transition-all duration-300 font-medium text-gray-600"
+                    >
+                        Hover Pause Demo
+                    </button>
                     <button
                         onClick={() => toast.error("Critical server error! Please review.", {
                             autoClose: false
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/apps/test-app/CHANGELOG.md b/apps/test-app/CHANGELOG.md
@@ -1,5 +1,16 @@
 # test-app
 
+## 0.1.0
+
+### Minor Changes
+
+- a54010e: feat: add pause on hover functionality for auto-closing toasts and update documentation
+
+### Patch Changes
+
+- Updated dependencies [a54010e]
+    - react-toast-msg@2.9.0
+
 ## 0.0.2
 
 ### Patch Changes
diff --git a/apps/test-app/package.json b/apps/test-app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "test-app",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/apps/test-app/src/App.tsx b/apps/test-app/src/App.tsx
@@ -4,10 +4,14 @@ export default function App() {
     const btn = "px-4 py-2 rounded-md bg-gray-50 border border-gray-200 hover:bg-gray-100 transition";
 
     return (
-        <div className="min-h-screen flex flex-col items-center justify-center gap-6 bg-white">
-            <ToastContainer autoClose={3000} closeButton />
+        <div className="min-h-screen flex flex-col items-center justify-center gap-6 bg-white px-4 py-10">
+            <ToastContainer autoClose={3000} closeButton pauseOnHover />
 
             <h1 className="text-3xl font-semibold">React Toast Msg Demo</h1>
+            <p className="max-w-2xl text-center text-sm text-zinc-500">
+                Toast timers now pause while you hover them. Use the examples below to try the
+                default behavior and the per-toast opt-out.
+            </p>
 
             <div className="flex flex-wrap items-center justify-center gap-4">
                 <div className="flex flex-col gap-2 w-64 p-5 rounded-lg bg-zinc-50">
@@ -36,6 +40,17 @@ export default function App() {
                     <button onClick={() => toast.loading("Loading something...")} className={btn}>
                         Loading Toast
                     </button>
+
+                    <button
+                        onClick={() =>
+                            toast("Hover me to pause auto close", {
+                                duration: 5000,
+                            })
+                        }
+                        className={btn}
+                    >
+                        Hover Pauses Timer
+                    </button>
                 </div>
 
                 <div className="flex flex-col gap-2 w-64 p-5 rounded-lg bg-zinc-50">
@@ -79,8 +94,20 @@ export default function App() {
                     >
                         Auto Close False
                     </button>
+
+                    <button
+                        onClick={() =>
+                            toast("This keeps counting even while hovered", {
+                                duration: 5000,
+                                pauseOnHover: false,
+                            })
+                        }
+                        className={btn}
+                    >
+                        Disable Hover Pause
+                    </button>
                 </div>
             </div>
         </div>
     );
-}
+}
diff --git a/content/docs/05-usage/02-advanced.mdx b/content/docs/05-usage/02-advanced.mdx
@@ -25,6 +25,25 @@ If you have an important message that requires the user's explicit attention, yo
 toast.error('Critical server error!', { autoClose: false });
 ```
 
+## Pause On Hover
+
+Auto-closing toasts pause their timer while hovered by default, which gives users time to read longer messages without changing your API calls.
+
+```tsx copy
+toast.success('Hover this toast to pause the countdown', {
+    duration: 5000
+});
+```
+
+If you want a toast to keep closing on schedule even while hovered, disable it per toast or on the container.
+
+```tsx copy
+toast('This toast will keep counting down', {
+    duration: 5000,
+    pauseOnHover: false
+});
+```
+
 ## Manual Close Button
 
 You can enable or disable the close button globally in `ToastContainer` or per-toast via the `toast` methods.
@@ -41,11 +60,12 @@ toast.error('Critical error!', { duration: 5000, closeButton: true });
 The `ToastContainer` accepts props that apply to all toasts.
 
 ```tsx copy
-<ToastContainer autoClose={5000} closeButton={true} />
+<ToastContainer autoClose={5000} closeButton={true} pauseOnHover={true} />
 ```
 
 - `autoClose`: Default duration for all toasts in milliseconds. Pass `false` to disable auto-closing globally.
 - `closeButton`: Whether to show a close button by default.
+- `pauseOnHover`: Pauses the auto-close timer while a user hovers a toast. Defaults to `true`.
 
 ## Promises
 
diff --git a/content/docs/apis/03-container.mdx b/content/docs/apis/03-container.mdx
@@ -9,10 +9,11 @@ The `ToastContainer` component is the host for all your toast notifications. It
 
 The `ToastContainer` component accepts the following props:
 
-| Props       | Type    | Default | Description                                                                 |
-| :---------- | :------ | :------ | :-------------------------------------------------------------------------- |
-| autoClose   | number  | 3000    | Global default duration for auto-closing toasts. Set to `false` to disable. |
-| closeButton | boolean | false   | Whether to show a close button on all toasts by default.                    |
+| Props        | Type             | Default | Description                                                                 |
+| :----------- | :--------------- | :------ | :-------------------------------------------------------------------------- |
+| autoClose    | number \| boolean | 3000    | Global default duration for auto-closing toasts. Set to `false` to disable. |
+| closeButton  | boolean          | false   | Whether to show a close button on all toasts by default.                    |
+| pauseOnHover | boolean          | true    | Pauses the auto-close timer while a user hovers a toast.                    |
 
 ## Usage
 
@@ -23,7 +24,7 @@ function Layout({ children }) {
     return (
         <>
             {children}
-            <ToastContainer autoClose={5000} closeButton />
+            <ToastContainer autoClose={5000} closeButton pauseOnHover />
         </>
     );
 }
diff --git a/content/docs/apis/04-types.mdx b/content/docs/apis/04-types.mdx
@@ -21,6 +21,7 @@ Used when triggering a toast (internally or via future API extensions).
 | duration | number | 3000 | Time in ms before auto-close. |
 | closeButton | boolean | false | Whether to show a close button on all toasts by default. |
 | autoClose | boolean | number | - | Disable auto-closing (false) or specify custom duration. |
+| pauseOnHover | boolean | true | Pause the auto-close timer while the toast is hovered. |
 
 
 ## ToastContainerProps
@@ -31,6 +32,7 @@ Props accepted by the `ToastContainer` component.
 | :--- | :--- | :--- | :--- |
 | autoClose | number | boolean | 3000 | Global default duration for auto-closing toasts. Set to `false` to disable. |
 | closeButton | boolean | false | Whether to show a close button on all toasts by default. |
+| pauseOnHover | boolean | true | Pause the auto-close timer while any hovered toast remains visible. |
 
 
 ## ShowToastFn
@@ -41,4 +43,4 @@ The signature for the `toast` function.
 | :--- | :--- | :--- | :--- |
 | message | string | - | The message to display. |
 | type | ToastType | 'default' | The style of the toast. |
-| duration | number | 3000 | Time in ms before auto-close. |
+| duration | number | 3000 | Time in ms before auto-close. |
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-toast-msg",
+  "name": "rtm",
   "private": true,
   "scripts": {
     "build": "turbo run build",
diff --git a/packages/react-toast-msg/CHANGELOG.md b/packages/react-toast-msg/CHANGELOG.md
@@ -1,5 +1,11 @@
 # react-toast-msg
 
+## 2.9.0
+
+### Minor Changes
+
+- a54010e: feat: add pause on hover functionality for auto-closing toasts and update documentation
+
 ## 2.8.1
 
 ### Patch Changes
diff --git a/packages/react-toast-msg/README.md b/packages/react-toast-msg/README.md
@@ -10,6 +10,7 @@ Fast, flexible, developer-friendly React toast notifications with a clean black
 - **Tailwind Driven**: Styled with Tailwind CSS for modern aesthetics.
 - **Performance**: Built with tsup for high performance and small bundle size.
 - **Customizable**: Easily customize duration, type, and icons.
+- **Readable by Default**: Auto-closing toasts pause while hovered.
 - **Promise Support**: First-class support for `toast.promise`.
 
 ## Installation
@@ -59,6 +60,9 @@ toast.loading('Saving results...');
 // Custom duration
 toast('Hello World!', { duration: 5000 });
 
+// Hover pauses auto close by default
+toast('Hover me if you need more time to read', { duration: 5000 });
+
 // Auto close false
 toast('Hello World!', { autoClose: false });
 
diff --git a/packages/react-toast-msg/package.json b/packages/react-toast-msg/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-toast-msg",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "Fast, flexible, developer-friendly React toast notifications with a clean black & white design.",
     "files": [
         "dist"
diff --git a/packages/react-toast-msg/src/components/toast-container/toast-container.test.tsx b/packages/react-toast-msg/src/components/toast-container/toast-container.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, act, waitFor } from '@testing-library/react';
+import { render, screen, act, fireEvent, waitFor } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { ToastContainer, toast } from './toast-container';
 
@@ -75,4 +75,51 @@ describe('ToastContainer & toast()', () => {
 
         expect(screen.getByText('Success!')).toBeInTheDocument();
     });
+
+    it('pauses auto close while hovered and resumes after mouse leave', () => {
+        render(<ToastContainer autoClose={1000} />);
+
+        act(() => {
+            toast('Hover Pause');
+        });
+
+        const toastElement = screen.getByText('Hover Pause');
+
+        act(() => {
+            vi.advanceTimersByTime(400);
+            fireEvent.mouseEnter(toastElement);
+            vi.advanceTimersByTime(1000);
+        });
+
+        expect(screen.getByText('Hover Pause')).toBeInTheDocument();
+
+        act(() => {
+            fireEvent.mouseLeave(toastElement);
+            vi.advanceTimersByTime(600);
+        });
+
+        waitFor(() => {
+            expect(screen.queryByText('Hover Pause')).not.toBeInTheDocument();
+        });
+    });
+
+    it('allows disabling pause on hover per toast', () => {
+        render(<ToastContainer autoClose={1000} />);
+
+        act(() => {
+            toast('No Pause', { pauseOnHover: false });
+        });
+
+        const toastElement = screen.getByText('No Pause');
+
+        act(() => {
+            vi.advanceTimersByTime(400);
+            fireEvent.mouseEnter(toastElement);
+            vi.advanceTimersByTime(600);
+        });
+
+        waitFor(() => {
+            expect(screen.queryByText('No Pause')).not.toBeInTheDocument();
+        });
+    });
 });
diff --git a/packages/react-toast-msg/src/components/toast-container/toast-container.tsx b/packages/react-toast-msg/src/components/toast-container/toast-container.tsx
diff --git a/packages/react-toast-msg/src/components/toast/toast.test.tsx b/packages/react-toast-msg/src/components/toast/toast.test.tsx
diff --git a/packages/react-toast-msg/src/components/toast/toast.tsx b/packages/react-toast-msg/src/components/toast/toast.tsx
diff --git a/packages/react-toast-msg/src/constants/toast-defaults.ts b/packages/react-toast-msg/src/constants/toast-defaults.ts
diff --git a/packages/react-toast-msg/src/hooks/use-toast-auto-close.ts b/packages/react-toast-msg/src/hooks/use-toast-auto-close.ts
diff --git a/packages/react-toast-msg/src/types.ts b/packages/react-toast-msg/src/types.ts
diff --git a/packages/react-toast-msg/src/utilities/remove-toast.ts b/packages/react-toast-msg/src/utilities/remove-toast.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "docs",`
`3`		`- "version": "0.1.2",`
	`3`	`+ "version": "0.2.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"dev": "next dev",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "test-app",`
`3`	`3`	`"private": true,`
`4`		`- "version": "0.0.2",`
	`4`	`+ "version": "0.1.0",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite",`