{"id":13740644,"url":"https://github.com/usernotnull/tall-toasts","last_synced_at":"2025-05-14T10:06:38.841Z","repository":{"id":36953004,"uuid":"415231741","full_name":"usernotnull/tall-toasts","owner":"usernotnull","description":"A Toast notification library for the Laravel TALL stack. You can push notifications from the backend or frontend to render customizable toasts with almost zero footprint on the published CSS/JS 🔥🚀","archived":false,"fork":false,"pushed_at":"2025-04-30T09:46:34.000Z","size":878,"stargazers_count":563,"open_issues_count":9,"forks_count":32,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-30T11:27:57.936Z","etag":null,"topics":["alpinejs","laravel","laravel-package","livewire","livewire-component","notifications","tailwindcss","toast","toast-notifications","toasts"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/usernotnull.png","metadata":{"files":{"readme":"README-v1.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"usernotnull"}},"created_at":"2021-10-09T07:08:15.000Z","updated_at":"2025-04-30T09:45:26.000Z","dependencies_parsed_at":"2023-09-27T15:14:56.067Z","dependency_job_id":"cb97ff43-1629-4116-9199-cbc2bce9cdca","html_url":"https://github.com/usernotnull/tall-toasts","commit_stats":{"total_commits":382,"total_committers":6,"mean_commits":"63.666666666666664","dds":0.1361256544502618,"last_synced_commit":"09cd1e5eecf6dc7d93f936419490da30a3a902c1"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usernotnull%2Ftall-toasts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usernotnull%2Ftall-toasts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usernotnull%2Ftall-toasts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usernotnull%2Ftall-toasts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usernotnull","download_url":"https://codeload.github.com/usernotnull/tall-toasts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254119484,"owners_count":22017951,"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":["alpinejs","laravel","laravel-package","livewire","livewire-component","notifications","tailwindcss","toast","toast-notifications","toasts"],"created_at":"2024-08-03T04:00:50.876Z","updated_at":"2025-05-14T10:06:38.815Z","avatar_url":"https://github.com/usernotnull.png","language":"PHP","funding_links":["https://github.com/sponsors/usernotnull"],"categories":["Packages / Plugins"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Beautiful Notification Toasts For Laravel\n\nA Toast global that can be called from the backend (via Controllers, Blade Views, Components) or frontend (JS, Alpine\nComponents) to render customizable toasts.\n\nRuns with the TALL stack: [Laravel](https://laravel.com/docs/10.x/installation),\n[TailwindCSS](https://tailwindcss.com/docs/guides/laravel),\n[Livewire](https://laravel-livewire.com/docs/2.x/installation),\n[AlpineJS](https://alpinejs.dev/essentials/installation).\n\n[![GitHub tag (latest SemVer)](https://img.shields.io/github/v/tag/usernotnull/tall-toasts?label=release\u0026sort=semver\u0026style=plastic)](https://github.com/usernotnull/tall-toasts/releases)\n[![Build size Brotli](https://img.badgesize.io/usernotnull/tall-toasts/main/dist/js/tall-toasts.js.svg?compression=brotli\u0026style=plastic\u0026color=green\u0026label=JS%20size)](https://github.com/usernotnull/tall-toasts/blob/main/dist/js/tall-toasts.js)  \n[![Scrutinizer Score](https://img.shields.io/scrutinizer/g/usernotnull/tall-toasts.svg?style=plastic\u0026label=scrutinizer%20score)](https://scrutinizer-ci.com/g/usernotnull/tall-toasts)\n[![Codacy branch grade](https://img.shields.io/codacy/grade/0c6b4f96ac2a4a6cbf265f5e825a3fd2/main?style=plastic)](https://www.codacy.com/gh/usernotnull/tall-toasts/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=usernotnull/tall-toasts\u0026utm_campaign=Badge_Grade)  \n[![Codecov branch](https://img.shields.io/codecov/c/github/usernotnull/tall-toasts/main?style=plastic)](https://app.codecov.io/gh/usernotnull/tall-toasts)\n\nLight | Dark\n------------ | -------------\n![toast-light](/.github/images/light.gif) | ![toast-dark](/.github/images/dark.gif)\n\n\u003c/div\u003e\n\n## Featured On\n\n[\u003cimg src=\"https://scontent.fauh1-1.fna.fbcdn.net/v/t1.18169-9/13886399_514185262114079_5747316548883570874_n.jpg?_nc_cat=106\u0026ccb=1-7\u0026_nc_sid=174925\u0026_nc_ohc=AJZWtm710c4AX969lHG\u0026_nc_ht=scontent.fauh1-1.fna\u0026oh=00_AfDpj5GaL87q5Fcg_O_S4hsDDmxBxw5WOW4EN43pzpfDUQ\u0026oe=642C30C5\" height=\"100\" alt=\"Laravel News\" /\u003e](https://laravel-news.com/toast-notifications-for-the-tall-stack) \u0026nbsp;\u0026nbsp;\u0026nbsp; [\u003cimg src=\"https://madewithlaravel.com/mandant/madewithlaravel/images/logo.png\" height=\"100\" alt=\"madewithlaravel\" /\u003e](https://madewithlaravel.com/tall-toasts) \u0026nbsp;\u0026nbsp;\u0026nbsp; [\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Podcasts_%28iOS%29.svg/2048px-Podcasts_%28iOS%29.svg.png\" height=\"100\" alt=\"Laravel News Podcast\" /\u003e](https://podcasts.apple.com/us/podcast/laravel-news-podcast/id1051289963?mt=2)\n\n## Why\n\nIf you are building a web app with the TALL stack, you must choose this library over the other outdated libraries\navailable:\n\n### Size does matter\n\nSince the frontend is a pure AlpineJS component with no reliance on external JS libs, and since the backend handles most\nof the logic, the javascript footprint is\ntiny [(less than ONE kilobyte!)](https://img.badgesize.io/usernotnull/tall-toasts/main/dist/js/tall-toasts.js.svg?compression=brotli\u0026style=plastic\u0026color=green\u0026label=JS%20size)\n.\n\nThe CSS footprint is also negligible as it uses the default TailwindCSS classes. Even if you override the default views,\nyou will rest assured that Tailwind's purging will only keep the styles/classes you have used.\n\nIn plain English, it will not bloat your generated JS/CSS files nor add extra files to download as when using other JS\nlibs!\n\n### Takes advantage of all the niceties that come with TALL\n\nYou can call it from anywhere! Memorize `Toast` for the frontend and `toast()` for the backend.\n\nSee the [usage section](#usage) for examples.\n\n### Customizable\n\nYou have control over the view: As you are overriding the blade view, you'll be able to shape it as you like using\nTailwindCSS classes.\n\nNo more messing with custom CSS overrides!\n\n## Usage\n\n### From The Frontend\n\n```js\nToast.info('Notification from the front-end...', 'The Title');\n\nToast.success('A toast without a title also works');\n\nToast.warning('Watch out!');\n\nToast.danger('I warned you!', 'Yikes');\n\nToast.debug('I will NOT show in production! Locally, I will also log in console...', 'A Debug Message');\n\nToast.success('This toast will display only for 3 seconds', 'The Title', 3000);\n\nToast.success('This toast will display until you remove it manually', 'The Title', 0);\n```\n\n### From The Backend\n\n```php\ntoast()\n    -\u003einfo('I will appear only on the next page!')\n    -\u003epushOnNextPage();\n\ntoast()\n    -\u003einfo('Notification from the backend...', 'The Title')\n    -\u003epush();\n\ntoast()\n    -\u003esuccess('A toast without a title also works')\n    -\u003epush();\n\ntoast()\n    -\u003ewarning('Watch out!')\n    -\u003epush();\n\ntoast()\n    -\u003edanger('I warned you!', 'Yikes')\n    -\u003epush();\n\ntoast()\n    -\u003edanger('I will go…\u003cbr\u003e\u003ci\u003eto the next line 💪\u003c/i\u003e', 'I am \u003cspan style=\"color:red;\"\u003eHOT\u003c/span\u003e')\n    -\u003edoNotSanitize()\n    -\u003epush();\n\ntoast()\n    -\u003edebug('I will NOT show in production! Locally, I will also log in console...', 'A Debug Message')\n    -\u003epush();\n\n// debug also accepts objects as message\ntoast()\n    -\u003edebug(User::factory()-\u003ecreateOne()-\u003eonly(['name', 'email']), 'A User Dump')\n    -\u003epush();\n\ntoast()\n    -\u003esuccess('This toast will display only for 3 seconds')\n    -\u003eduration(3000)\n    -\u003epush();\n\ntoast()\n    -\u003esuccess('This toast will display until you remove it manually')\n    -\u003esticky()\n    -\u003epush();\n```\n\nYou can call the above toast helper from controllers, blade views, and components.\n\n**To properly call it from inside livewire components, add the trait:**\n\n```php\nuse Livewire\\Component;\nuse Usernotnull\\Toast\\Concerns\\WireToast;\n\nclass DemoComponent extends Component\n{\n    use WireToast; // \u003c-- add this\n\n    public function sendCookie(): void\n    {\n        toast()\n            -\u003esuccess('You earned a cookie! 🍪')\n            -\u003epushOnNextPage();\n\n        redirect()-\u003eroute('dashboard');\n    }\n```\n\n## Support Me\n\nI plan on developing many open-source packages using the TALL stack.  \nConsider supporting my work by tweeting about this library or by contributing to this package.\n\nCheck out the list of other packages I built for the TALL stack [Other Packages](#other-packages).  \nTo stay updated, [follow me on Twitter](https://twitter.com/usernotnull).\n\n## Requirements\n\nDependency | Version\n----|----\nPHP | ^8.0\nLaravel | ^8.0 \\| ^9.0 \\| ^10.0\nTailwindCSS | ^2.0 \\| ^3.0\nLivewire | ^2.0\nAlpineJS | ^3.0\n\n## Installation\n\nYou can install the package via [Composer](https://getcomposer.org/):\n\n```bash\ncomposer require usernotnull/tall-toasts\n```\n\n## Setup\n\n### TailwindCSS\n\nBuild your CSS as you usually do, ie\n\n```bash\nnpm run dev\n```\n\n#### Usage With Tailwind JIT\n\nIf you are using [Just-in-Time Mode](https://tailwindcss.com/docs/just-in-time-mode), add these additional lines into\nyour `tailwind.config.js` file:\n\n```js\n// use `purge` instead of `content` if using TailwindCSS v2.x\ncontent: [\n    './vendor/usernotnull/tall-toasts/config/**/*.php',\n    './vendor/usernotnull/tall-toasts/resources/views/**/*.blade.php',\n    // etc...\n]\n```\n\nThis way, Tailwind JIT will include the classes used in this library in your CSS.\n\n*As usual, if the content of `tailwind.config.js` changes, you should re-run the npm command.*\n\n### Registering Toast with AlpineJS\n\nNext, you need to register `Toast` with AlpineJS.  How this is done depends on which method you used to add Alpine to your project:\n\n#### AlpineJS installed as an NPM Module\n\nIf you have installed AlpineJS through NPM, you can add the Toast component by changing your `app.js` file to match:\n\n```js\nimport Alpine from \"alpinejs\"\nimport ToastComponent from '../../vendor/usernotnull/tall-toasts/resources/js/tall-toasts'\n\nAlpine.data('ToastComponent', ToastComponent)\n\nwindow.Alpine = Alpine\nAlpine.start()\n```\n\n*If you have a custom directory structure, you may have to adjust the above import path until it correctly points\nto `tall-toasts.js` inside this vendor file.*\n\nInclude the `@toastScripts` blade directive *BEFORE* the `mix()` helper if using Laravel Mix,  if using Vite, include it before the `@vite` blade directive.\n\n```html\n@toastScripts\n\n\u003c--- Vite ---\u003e\n@vite(['resources/css/app.css', 'resources/js/app.js'])\n\n\u003c--- Mix ---\u003e\n\u003cscript src=\"{{ mix('js/app.js') }}\" defer\u003e\u003c/script\u003e\n```\n\n#### AlpineJS added via script tag\n\nIf you imported AlpineJS via a script tag simply add the `@toastScripts` blade directive *BEFORE* importing AlpineJS:\n\n```html\n@toastScripts\n\u003cscript src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\" defer\u003e\u003c/script\u003e\n```\n\n### The View\n\nAdd `\u003clivewire:toasts /\u003e` **as high as possible** in the body tag, ie:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003c!-- Metas, Styles, JS... --\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003clivewire:toasts /\u003e\n\n    \u003c!-- Below toasts, your contents... --\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\nThat's it! 🎉\n\n***\n\n## RTL Support\n\nThe default layout now supports RTL.\n\nAs per TailwindCSS docs on [RTL support](https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support):  \n`Always set the direction, even if left-to-right is your default`.\n\n```html\n\u003chtml dir=\"ltr\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/html\u003e\n```\n\n## Customization\n\nThe toasts should look pretty good out of the box. However, we've documented a couple of ways to customize the views and\nfunctionality.\n\n### Configuration\n\nYou can publish the config file with:\n\n```bash\nphp artisan vendor:publish --provider=\"Usernotnull\\Toast\\ToastServiceProvider\" --tag=\"tall-toasts-config\"\n```\n\nThese are the default contents of the published config file:\n\n```php\n\u003c?php\n\nreturn [\n    /*\n     * How long each toast will be displayed before fading out, in ms\n     */\n    'duration' =\u003e 5000,\n\n    /*\n     * How long to wait before displaying the toasts after page loads, in ms\n     */\n    'load_delay' =\u003e 400,\n];\n\n```\n\n### Customizing views\n\nYou can publish and change all views in this package:\n\n```bash\nphp artisan vendor:publish --provider=\"Usernotnull\\Toast\\ToastServiceProvider\" --tag=\"tall-toasts-views\"\n```\n\nThe published views can be found and changed in `resources/views/vendor/tall-toast/`.\n\nThe published files are:\n\n- `includes/content.blade.php` - *the content view of each popup notification, fully configurable*\n- `includes/icon.blade.php` - *the icons of each notification type*\n- `livewire/toasts.blade.php` - *the parent of all toasts*\n\n#### Text Sanitization\n\nThe content view displays the title and message with x-html. This is fine since the backend sanitizes the title and\nmessage by default.\n\n⚠️ If you wish to skip sanitization in order to display HTML content, such as bolding the text or adding `\u003cbr\u003e` to go to\nthe next line, you will call doNotSanitize() as seen in the [usage section](#usage). In such case, make sure no user\ninput is provided!\n\n## Troubleshooting\n\nMake sure you thoroughly go through this readme first!\n\nIf the checklist below does not resolve your problem, feel free\nto [submit an issue](https://github.com/usernotnull/tall-toasts/issues/new/choose). Make sure to follow the bug report\ntemplate. It helps us quickly reproduce the bug and resolve it.\n\n### The toasts show multiple times only after refresh\n\n- If you are calling toasts from a livewire component,\n    did you add the trait WireToast to the component? [(see)](#from-the-backend)\n\n- Did you swap push() and pushOnNextPage()?\n\n### The toasts won't show\n\n- Is the \u003clivewire:toasts /\u003e located in a page that has both the livewire and alpine/app.js script tags\n    inserted? [(see)](#the-view)\n\n- Did you skip adding the ToastComponent as an alpine data component? [(see)](#alpinejs)\n\n- Did you forget calling push() at the end of the chained method? [(see)](#usage)\n\n- Have you tried calling the toast() helper function from another part of the application and check if it worked (it\n    will help us scope the problem)? [(see)](#usage)\n\n- Did you try calling `php artisan view:clear`?\n\n- Are you getting any console errors?\n\n### The toasts show but look weird\n\n- Are you using TailwindCSS JIT? Don't forget to update your purge list! [(see)](#usage-with-tailwind-jit)\n- You may need to rebuild your CSS by running: `npm run dev` or re-running `npm run watch` [(see)](#tailwindcss)\n\n## Other Packages\n\nTo stay updated, [follow me on Twitter](https://twitter.com/usernotnull).\n\n## Testing\n\nThis package uses [PestPHP](https://pestphp.com/) to run its tests.\n\n- To run tests without coverage, run:\n\n```bash\ncomposer test\n```\n\n- To run tests with coverage, run:\n\n```bash\ncomposer test-coverage\n```\n\n## Contributing\n\nThis package has 3 GitHub Workflows which run sequentially when pushing PRs:\n\n- First, it checks for styling issues and automatically fixes them using:\n    1. [PHP CS Fixer](https://github.com/FriendsOfPHP/PHP-CS-Fixer)\n    2. [PHP Code Beautifier](https://github.com/squizlabs/PHP_CodeSniffer)\n\n- Then, it uses static analysis followed by standard unit tests using:\n    1. [Psalm](https://psalm.dev/)\n    2. [PHP Stan](https://github.com/phpstan/phpstan)\n    3. [PHP MessDetector](https://phpmd.org/)\n    4. [PHP Code Sniffer](https://github.com/squizlabs/PHP_CodeSniffer)\n    5. [PestPHP](https://pestphp.com/)\n\n- Finally, it generates the minified JS dist which is injected by @toastScripts\n\nWhen pushing PRs, it's a good idea to do a quick run and make sure the workflow checks out, which saves time during code\nreview before merging.\n\nTo facilitate the job, you can run the below command before pushing the PR:\n\n```bash\ncomposer workflow\n```\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Versioning\n\nThis project follows the [Semantic Versioning](https://semver.org/) guidelines.\n\n## Security Vulnerabilities\n\nAs per security best practices, do not call `doNotSanitize()` on a toast that has user input in its message or title!\n\nPlease review [the security policy](https://github.com/usernotnull/tall-toasts/security/policy) on how to report\nsecurity vulnerabilities.\n\n## Credits\n\n- [John F](https://github.com/usernotnull) ( [@usernotnull](https://twitter.com/usernotnull) )\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [the license file](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusernotnull%2Ftall-toasts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusernotnull%2Ftall-toasts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusernotnull%2Ftall-toasts/lists"}