{"id":26878214,"url":"https://github.com/urian121/nextjs-toast-notify","last_synced_at":"2025-05-07T17:21:08.257Z","repository":{"id":249307369,"uuid":"831059633","full_name":"urian121/nextjs-toast-notify","owner":"urian121","description":"Nextjs Toast Notify es el paquete npm que transformará cómo manejas las notificaciones en tus aplicaciones web. Diseñado para ofrecer una experiencia de usuario sin interrupciones, Nextjs Toast Notify permite agregar alertas emergentes (toasts) con una estética moderna y personalizable.","archived":false,"fork":false,"pushed_at":"2025-05-03T16:40:22.000Z","size":13360,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-03T16:53:22.611Z","etag":null,"topics":["alerta-react","alertas","alertas-nextjs","alertas-para-nextjs","alertas-para-react","alertas-react","nextjs","notificaciones","notification","notifications","notify","notify-nextjs","notify-react","notify-svelte","notifyjs","reactjs","toast","toast-para-nextjs","toast-para-react","toast-react"],"latest_commit_sha":null,"homepage":"https://www.nextjstoastnotify.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/urian121.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-19T15:06:10.000Z","updated_at":"2025-05-03T16:40:25.000Z","dependencies_parsed_at":"2024-07-20T00:48:41.016Z","dependency_job_id":"85492dd5-75d8-46a3-9ace-aeb495fa815e","html_url":"https://github.com/urian121/nextjs-toast-notify","commit_stats":null,"previous_names":["urian121/react-nextjs-toast-notify","urian121/nextjs-toast-notify"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urian121%2Fnextjs-toast-notify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urian121%2Fnextjs-toast-notify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urian121%2Fnextjs-toast-notify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urian121%2Fnextjs-toast-notify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/urian121","download_url":"https://codeload.github.com/urian121/nextjs-toast-notify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252922307,"owners_count":21825641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alerta-react","alertas","alertas-nextjs","alertas-para-nextjs","alertas-para-react","alertas-react","nextjs","notificaciones","notification","notifications","notify","notify-nextjs","notify-react","notify-svelte","notifyjs","reactjs","toast","toast-para-nextjs","toast-para-react","toast-react"],"created_at":"2025-03-31T12:19:58.676Z","updated_at":"2025-05-07T17:21:08.247Z","avatar_url":"https://github.com/urian121.png","language":"TypeScript","funding_links":["https://www.paypal.com/donate/?hosted_button_id=4SV78MQJJH3VE"],"categories":[],"sub_categories":[],"readme":"# Nextjs Toast Notify\n\n[![npm version](https://img.shields.io/npm/v/nextjs-toast-notify.svg?style=flat-square)](https://www.npmjs.com/package/nextjs-toast-notify)\n[![GitHub Repo](https://img.shields.io/badge/GitHub-repository-blue?style=flat-square\u0026logo=github)](https://github.com/urian121/nextjs-toast-notify)\n[![npm](https://img.shields.io/npm/dt/nextjs-toast-notify.svg)](https://www.npmjs.com/package/nextjs-toast-notify)\n\n![demo](https://raw.githubusercontent.com/urian121/imagenes-proyectos-github/master/nextjs-toast-notify.gif)\n👉 [Ver Código en GitHub](https://github.com/urian121/nextjs-toast-notify-con-reactjs)\n\n**Nextjs Toast Notify** es el paquete npm moderno, intuitivo, flexible, liviano que transformará cómo manejas las notificaciones en tus aplicaciones web. Diseñado para ofrecer una experiencia de usuario sin interrupciones, **Nextjs Toast Notify** permite agregar alertas emergentes (toasts) con una estética moderna y personalizable. **Nextjs Toast Notify** también destaca por su configuración intuitiva y opciones flexibles, que te permiten adaptar las notificaciones a tus necesidades específicas con facilidad.\n\n## ¿Para Qué Fue Creado?\n\n**Nextjs Toast Notify** fue creado para simplificar la implementación de notificaciones en aplicaciones web, permitiendo a los desarrolladores agregar mensajes informativos, de éxito, advertencia o error de forma rápida y sencilla. **Nextjs Toast Notify** es altamente personalizable y compatible con diferentes posiciones en la pantalla, así como con varios efectos de animación para mejorar la experiencia del usuario.\n\n## ¿Qué Necesidad Resuelve?\n\n**Nextjs Toast Notify** responde a la necesidad de mejorar la manera en que los desarrolladores muestran mensajes de notificación al usuario en aplicaciones web, sin interrumpir la interacción actual. En muchas aplicaciones web, es crucial tener una forma efectiva de informar al usuario sobre eventos importantes, resultados de acciones o errores.\n\n## Instalación\n\nPuedes instalar el paquete usando npm:\n\n    $ npm install nextjs-toast-notify --save\n    $ yarn add nextjs-toast-notify\n\n## Casos de uso:\n\n### 🔥Cómo Integrar Nextjs Toast Notify en una App ToDo con React.js 🚀\n\n![demo](https://raw.githubusercontent.com/urian121/imagenes-proyectos-github/master/ToDoAppConReactY-nextjs-toast-notify.gif)\n👉 [Ver Código en GitHub](https://github.com/urian121/Create-ToDo-List-App-with-ReactJS)\n\n## Ejemplo Práctico utilizando React.js\n\n```jsx\nimport { showToast } from \"nextjs-toast-notify\";\n\nfunction App() {\n  const handleShowToast = () =\u003e {\n    showToast.success(\"¡La operación se realizó con éxito!\", {\n      duration: 5000,\n      progress: true,\n      position: \"bottom-center\",\n      transition: \"bounceIn\",\n      icon: '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check\"\u003e\u003cpath d=\"M20 6 9 17l-5-5\"/\u003e\u003c/svg\u003e',\n      sound: true,\n    });\n  };\n\n  return \u003cbutton onClick={handleShowToast}\u003eMostrar Toast\u003c/button\u003e;\n}\n\nexport default App;\n```\n\n### 🔥Integrar Next.js Toast Notify en una aplicación de Next.js 🚀\n\n![demo](https://raw.githubusercontent.com/urian121/imagenes-proyectos-github/master/like-dislike-nextjs-toast-notify.gif)\n👉 [Ver Código en GitHub](https://github.com/urian121/sistema-like-dislikes-con-nextjs-y-nextjs-toast-notify)\n\n# Tipos de Notificaciones\n\n**Nextjs Toast Notify** permite mostrar diferentes tipos de notificaciones según el contexto de la aplicación. Para definir el tipo de notificación, solo debes especificarlo al invocar **toast**.\n\n### Tipos de Toast\n\n- **✅`showToast.success`**: Muestra un toast de éxito.\n- **❌`showToast.error`**: Muestra un toast de error.\n- **⚠️`showToast.warning`**: Muestra un toast de advertencia.\n- **⬆️`showToast.info`**: Muestra un toast de información.\n\n### Ejemplos de Uso\n\n```jsx\nimport { showToast } from \"nextjs-toast-notify\";\n\nfunction App() {\n  const handleShowSuccessToast = () =\u003e {\n    showToast.success(\"¡Operación exitosa!\"); // 'showToast.success' | 'showToast.error' | 'showToast.info' | 'showToast.warning'\n  };\n\n  return \u003cbutton onClick={handleShowSuccessToast}\u003eToast Success\u003c/button\u003e;\n}\nexport default App;\n```\n\n## Mostrar Notificaciones en Diferentes Posiciones\n\nPara mostrar notificaciones en diferentes posiciones de la pantalla, solo necesitas especificar la opción `position` con uno de los siguientes valores:\n\n- **`top-left`**: Esquina superior izquierda\n- **`top-center`**: Centro superior\n- **`top-right`**: Esquina superior derecha\n- **`bottom-left`**: Esquina inferior izquierda\n- **`bottom-center`**: Centro inferior\n- **`bottom-right`**: Esquina inferior derecha\n\nAquí tienes un ejemplo de cómo configurarlo:\n\n```jsx\nimport { showToast } from \"nextjs-toast-notify\";\n\nfunction App() {\n  const handleToastPosition = () =\u003e {\n    showToast.success(\"¡Operación exitosa!\", {\n      position: \"top-right\", // 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n    });\n  };\n\n  return \u003cbutton onClick={handleToastPosition}\u003eToast arriba derecha\u003c/button\u003e;\n}\n\nexport default App;\n\n```\n\n## Uso a través de CDN\n\nTambién puedes incluir **Nextjs Toast Notify** directamente en tu proyecto utilizando un enlace CDN. Sigue estos pasos:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"es\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eNextjs Toast Notify con CDN\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cbutton id=\"show-toast\"\u003eMostrar Toast\u003c/button\u003e\n\n    \u003cscript type=\"module\"\u003e\n      import { showToast } from \"https://unpkg.com/nextjs-toast-notify@1.38.0/dist/nextjs-toast-notify.js\";\n\n      document.getElementById(\"show-toast\").addEventListener(\"click\", () =\u003e {\n        showToast.success(\"Hola a todos los Devs de JavaScript!\", {\n          duration: 5000, // Duración de la notificación en ms\n          position: \"top-right\", // Posición de la notificación\n          transition: \"bounceIn\", // Tipo de transición para la entrada\n          icon: \"\",\n          sound: true, // Reproducir sonido\n        });\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n## API de Nextjs Toast Notify\n\nLa API de **Nextjs Toast Notify** te permite mostrar notificaciones emergentes con una amplia gama de configuraciones. A continuación, se detalla cómo utilizar los métodos disponibles y qué opciones puedes configurar.\n\n### Opciones de Personalización\n\nPuedes personalizar las notificaciones mediante las opciones que se pasan como el segundo parámetro en cada uno de los métodos. Aquí están las opciones disponibles:\n\n- **`duration`**:\n\n  - **Tipo**: `number`\n  - **Descripción**: Define la duración de la notificación en milisegundos.\n  - **Valor por defecto**: `8000`\n  - **Ejemplo**:\n    ```jsx\n    import { showToast } from \"nextjs-toast-notify\";\n\n    function App() {\n      const handleShowToast = () =\u003e {\n        showToast.success(\"¡Toast de con una duración de 5 segundos!\", {\n          duration: 5000, // Duración en milisegundos\n        });\n      };\n      return \u003cbutton onClick={handleShowToast}\u003eMostrar Toast\u003c/button\u003e;\n    }\n\n    export default App;\n    ```\n\n- **`progress`**:\n\n  - **Tipo**: `boolean`\n  - **Descripción**: Si se debe mostrar una barra de progreso para la notificación.\n  - **Valor por defecto**: `true`\n  - **Ejemplo**:\n    ```jsx\n    import { showToast } from \"nextjs-toast-notify\";\n\n    function App() {\n      const handleShowToast = () =\u003e {\n        showToast.info(\"¡Toast de información!\", { \n          progress: false, // Desactiva la barra de progreso\n        });\n      };\n      return \u003cbutton onClick={handleShowToast}\u003eMostrar Toast\u003c/button\u003e;\n    }\n    export default App;\n    ```\n\n- **`position`**:\n\n  - **Tipo**: `'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'`\n  - **Descripción**: Define la posición de la notificación en la pantalla.\n  - **Valor por defecto**: `'top-right'`\n  - **Ejemplo**:\n    ```jsx\n    import { showToast } from \"nextjs-toast-notify\";\n\n    function App() {\n      const handleToastPosition = () =\u003e {\n        showToast.success(\"¡Toast centrada correctamente!\", {\n          position: \"top-center\", // 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n        });\n      };\n\n      return \u003cbutton onClick={handleToastPosition}\u003eToast centrada\u003c/button\u003e;\n    }\n\n    export default App;\n    ```\n\n- **`transition`**:\n\n  - **Tipo**: `'fadeIn' | 'bounceIn' | 'swingInverted' | 'popUp' | 'bottomToTopBounce' | 'bounceInDown'`\n  - **Descripción**: El efecto de animación de entrada o salida para la notificación.\n  - **Valor por defecto**: `'fadeIn'`\n  - **Ejemplo**:\n    ```jsx\n    import { showToast } from \"nextjs-toast-notify\";\n\n    function App() {\n      const handleToastAnimationPopUp = () =\u003e {\n        showToast.error(\"!Toast con animación popUp!\", { \n          transition: 'popUp' \n        }); // Animación tipo popUp\n      };\n      return \u003cbutton onClick={handleToastAnimationPopUp}\u003eToast Rebote\u003c/button\u003e;\n    }\n\n    export default App;\n    ```\n\n- **`icon`**:\n\n  - **Tipo**: `string`\n  - **Descripción**: Icono personalizado para la notificación (opcional). Si no se proporciona, se usa un ícono predeterminado basado en el tipo de notificación.\n  - **Ejemplo**:\n    ```jsx\n    function App() {\n      const handleToastIcon = () =\u003e {\n        showToast.success(\"¡Toast con ícono!\", {\n          icon: '🎉', // Opcional: puede ser un ícono, emoji o SVG personalizado\n        });\n      };\n\n      return \u003cbutton onClick={handleToastIcon}\u003eToast con ícono\u003c/button\u003e;\n    }\n    ```\n\n- **`sound`**:\n  - **Tipo**: `boolean`\n  - **Descripción**: Activa o desactiva un sonido cuando se muestra la notificación.\n  - **Valor por defecto**: `false`\n  - **Ejemplo**:\n    ```jsx\n    import { showToast } from \"nextjs-toast-notify\";\n\n    function App() {\n      const handleToastSound = () =\u003e {\n        showToast.info(\"¡Toast con sonido activo!\", {\n          sound: true, // Opcional: habilita el sonido (true o false)\n        });\n      };\n      return \u003cbutton onClick={handleToastSound}\u003eToast con sonido\u003c/button\u003e;\n    }\n\n    export default App;\n    ```\n\n### Ejemplo Completo\n\n```jsx\nimport { showToast } from \"nextjs-toast-notify\";\n\nfunction App() {\n  const mostrarNotificacion = () =\u003e {\n    showToast.success(\"¡Operación exitosa!\", {\n      duration: 4000,        // Duración del toast en milisegundos (4 segundos)\n      position: \"top-center\",// Posición en pantalla del toast\n      transition: \"bounceIn\",// Animación de entrada\n      icon: \"🚀\",            // Ícono personalizado (puede ser emoji, svg o HTML)\n      progress: false,       // Mostrar o no la barra de progreso\n      sound: true,           // Reproducir sonido al mostrar el toast\n    });\n  };\n\n  return \u003cbutton onClick={mostrarNotificacion}\u003eMostrar Notificación\u003c/button\u003e;\n}\n\nexport default App;\n```\nLa notificación tiene una **duración de 4 segundos**, está **centrada en la parte superior**, con un efecto de **animación de rebote**, un **ícono personalizado**, **sin barra de progreso** y con **sonido activado**.\n\n## 🌟 Ventajas y Características Clave\n\n- **Fácil Integración**: Simple de agregar y utilizar en cualquier proyecto web.\n- **Altamente Configurable**: Personaliza la duración, la posición, el progreso y el tipo de notificación.\n- **Integración rápida:** Instalación simple a través de npm o yarn, listo para usar en minutos.\n- **Efectos de Animación**: Soporta diferentes efectos de animación para las notificaciones de entrada y salida.\n- **Control del Progreso**: Incluye una barra de progreso opcional para mostrar la duración restante de la notificación.\n- **Posiciones de Notificación**: Soporta múltiples posiciones en la pantalla: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`.\n- **Tipos de Notificación**: Cuatro tipos de notificación predefinidos: `success`, `error`, `warning`, `info`.\n- **Animaciones**: Soporte para animaciones de entrada y salida configurables (`fadeIn`, `bounceIn`, `swingInverted`, `popUp`, `bottomToTopBounce`, `bounceInDown`).\n- **Barra de Progreso**: Opcional para mostrar el progreso de la notificación.\n- **Cierre Manual**: Permite al usuario cerrar las notificaciones mediante un botón de cierre.\n- **Cierre Automático**: Permite definir la duración de la alerta, tras la cual se cerrará automáticamente.\n- **Configuración por Defecto**: Las animaciones y el comportamiento de la notificación se pueden personalizar a través de las opciones de configuración.\n- **Actualizaciones regulares:** Mantenido activamente con mejoras y actualizaciones periódicas.\n- **Licencia abierta:** Publicado bajo licencia MIT, permitiendo su uso en proyectos comerciales y personales sin restricciones.\n- **Documentación clara y detallada:** Incluye ejemplos prácticos y documentación completa para facilitar la implementación y configuración.\n\n\n## 🤝 Únete y Contribuye\n\nSi encuentras algún problema o tienes una idea para mejorar el paquete, por favor abre un issue o envía un pull request\nen GitHub: https://github.com/urian121/nextjs-toast-notify\n\n## 👨‍💻 Desarrollador\n\n**Urian Viera**  \n🌐 [urianviera.com](https://www.urianviera.com)  \n📺 [YouTube](https://www.youtube.com/WebDeveloperUrianViera)  \n💌 [urian1213viera@gmail.com](mailto:urian1213viera@gmail.com)  \n☕ [¡Apóyame en PayPal!](https://www.paypal.com/donate/?hosted_button_id=4SV78MQJJH3VE)\n\n## Copyright\n\n© 2024 Urian Viera. Todos los derechos reservados.\n\n## License\n\nLicensed under MIT\n\n[![GitHub](https://img.shields.io/badge/GitHub-urian121/nextjs--toast--notify-181717?logo=github\u0026style=flat-square)](https://github.com/urian121/nextjs-toast-notify)\n\n## Agradecimientos\n\n¡Gracias a todos los **Devs** 👨‍💻 que han utilizado y contribuido al desarrollo de **Nextjs Toast Notify**! Su apoyo y retroalimentación son fundamentales para mejorar continuamente este paquete.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Furian121%2Fnextjs-toast-notify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Furian121%2Fnextjs-toast-notify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Furian121%2Fnextjs-toast-notify/lists"}